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This book is a guide to the flickering, ephemeral world of type on screen. 
Authored by a team of graduate students and faculty at MICA (Maryland 
Institute College of Art), Type on Screen explores diverse typographic issues, 
from choosing fonts to building brands. We plunged into the churning waters 
of today’s tools and platforms knowing that the world we are studying won’t 
stop changing. We expect this volume to be the first edition among many. 

Type on Screen is not a software manual or a book of technical tutorials. 
Rather, it surveys new design principles born of screen-based communication 
while drawing on traditions of form and function that have evolved over 
hundreds of years. Typography has always responded to new technologies 
and new audiences. From Johannes Gutenberg in the fifteenth century to 
Peter Bil’ak today, the great typeface designers have forged new technologies 
and new business models as well as new visual forms. Typography is forever 
in motion—and never more so than now. 

We conceived this guide with a range of readers in mind: the visual 
designer working across print and screen media, the student or educator 
exploring screen-based creativity, the developer trying to better understand 
visual design principles, and the editor or content producer seeking more 
sophisticated control over digital tools and systems. 


Designers manipulate the basic parameters of typography on screen— 
weight, size, style, alignment, and spacing—in order to help users find the 
information they are seeking. In many instances the user can change those 
parameters, too, whether the user is the reader of a final document or an 
editor or writer working with a content management system. 

The first four chapters of Type on Screen present basic concepts for 
shaping written content, be it a book, a news article, a blog, an infographic, 
or an advertisement. Such content needs to be coded in typefaces, shaped 
into columns and sections, accessed by an interface, linked to other texts, 
and packaged for distribution. The output might be a web browser, a mobile 
device, a tablet, or an e-reader. Designers make a series of interconnected 
choices—from typeface and page structure to modes of linearity, interactivity, 
and navigation—to create pleasing and engaging experiences for all readers. 

Beyond the basics of using type on screen, this guide introduces concepts 
that explore sceen-based design in more depth, explaining how to create 
icon systems, how to approach branding in a screen-dominated world, and 
how to enliven text with animation and code. In place of static logotypes 
constrained by the printing process, today’s designers are creating complex 
branding systems alive with color and movement. Designers play with speed, 
color, opacity, and pacing to tell stories and convey emotion. Letterforms can 
move and change on screen, just as the background, camera, and surrounding 
elements can shift and transform. Designers are writing code to generate 
letters and texts endowed with the quirks and peculiarities of living things. 
They are using handcrafted software to create a less predictable world. 

Throughout this book, general principles are demonstrated with examples 
of outstanding work created by some of the world’s leading practitioners 
as well as by students and emerging artists. We are grateful to the many 
designers who shared their work so that others can learn from it. 

Type on Screen is the sixth in a series of books published by Princeton 
Architectural Press and MICA. By producing these books, our graduate 
students and faculty expand their own knowledge of design while exchanging 
ideas with a community of designers and creative people working around the 
world. Our classrooms have become practical laboratories, and these books 
are the results of our research. We are proud to share them with a growing 
community of people who are actively engaging the medium of design, both 
professionally and in their daily lives. 
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CHRISTOPHER CLARK 


Back in 2006, before web fonts changed the design world, 
hypertext luminary Oliver Reichenstein crashed into the scene 
with his article “Web Design Is 95% Typography.” He suggested 
that because the World Wide Web is composed mostly of 
letters, web designers had better start paying more attention 
to text. Good typography, he argued, is not about choosing 
from a multitude of fonts. The pioneering printers of the Italian 
Renaissance (as well as the Swiss design rationalists of the 1950s 
and 1960s) plied their craft with just a few type styles; so too 
could web designers create beautifully structured pages with a 
minimal range of typefaces. 

The idea of solving any design problem with a single font had 
great appeal back then, when web designers were restricted 
to the skimpy handful of type styles that could be found on the 
operating systems of end users. The graphic landscape of the web 
has since radically expanded. Digital typography now teems with 
the diversity of a tropical rainforest—and it is littered with more 
trash than an urban underpass. 

This chapter aims to help designers and developers make their 
way through today’s welter of typographic choices. By looking 
at the visual anatomy and cultural geography of letterforms, you 
will start to see why a great typeface works so well—and why 
a bad one doesn’t. Armed with these typographical field notes, 
designers will be ready to venture on through a hand-picked 
menagerie of screen-ready fonts. 

Collected here are typefaces that have proven their beauty 
and usefulness across platforms. We have ranked each font for its 
readability, showmanship, and classiness, and have looked at how 
each one renders on multiple operating systems and browsers. 
The result of these labors is a small but powerful army of 
trustworthy typefaces that will enable designers to speak clearly 
and consistently to users of every stripe. 


A-SANS The lowercase letter g is shown here READ MORE >> Oliver Reichenstein, “Web 
with its vector outlines and hinted nodes Design Is 95% Typography,” Information 
optimized for screen use. Design: Young Sun Architects, October 2006, http://ia.net/blog/ 


Compton, 2013. 


the-web-is-all-about-typography-period/. 
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WEB FONTS: A SHORT HISTORY 


Typographic diversity on the web is not a new idea. The style sheet language 
CSS 2 (Cascading Style Sheets 2), drafted in 1998, included the @font- 

face rule, which enabled browsers to download font information and thus 
permitted, in principle, virtually any font to be used on any site. Internet 
Explorer 4 implemented the @font-face rule and has supported it ever since. 
However, @font-face contained no piracy protections whatsoever, allowing 
users to download unlicensed fonts and even link them across different 
sites. Such unfettered font use threatened the entire business of type design, 
causing @font-face to be banished from CSS for nearly a decade. 

Perhaps the Internet wasn’t ready for fonts in 1998. Adhering to the Web 
Standards Movement was still an evangelist’s badge, not a job requirement, 
and the way operating systems rendered type varied so wildly that designers 
might as well have used a different typeface for each browser. But by the 
mid-2000s, things had started to change. The implementation of web 
standards had made developing sites a quicker process, allowing designers 
to spend less time writing different versions of the same page and more time 
perfecting their craft. As websites became more complex and web design 
grew more elegant, the wish for more fonts grew. Technologies popped up 
to fill the void left by CSS 2.1. Techniques such as Scalable Inman Flash 
Replacement (SIFR), Cufén (Scalable Vector Graphics, SVG), and Typeface.js 
(canvas) worked reasonably well and allowed any print font to be used on the 
web without the need to purchase additional licenses. Type designers began 


to worry less about piracy and more about a design market that was rapidly 
moving on without them. 


HOW THE WEB LOOKED 

IN 1992 The early Internet was designed 

to connect scientists working on different 
platforms around the world. Fonts were 
accessed by default from the user's computer. 
The ubiquity of Times Roman fit the web's aim 
“to give universal access to a large universe of 
documents.” The World Wide Web Consortium 
“The Project,” W3C, accessed May 29, 2012, 
http://www.w3.org/History/19921103- 


hypertext/hypertext/WWW/TheProject.html. 


World Wide Web 


The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming | 
large universe of documents, 


Everything there is online about W3 is linked directly or indirectly to this document, includir 
the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions . 


What's out there? 

Pointers to the world's online information, subjects , W3 servers, etc, 
Help 

on the browser you are using 


Software Products 
A list of W3 project components and their current state. (e.g. Line Mode ,X11 Viola ,} 
Mail robot , Library ) 

Technical 


Details of protocols, formats, program internals etc 


In 2008 Mozilla Firefox and Apple Safari implemented the @font-face rule, 
making web typography accessible to most Internet users while engulfing 
the web community in a firestorm of buzz. Type hosting services such as 
Typekit, Fontdeck, and Google Fonts stepped in to fill the licensing and piracy 
void that still existed in CSS 3. They helped smooth out many of the wrinkles 
that came with cross-browser support and provided a range of typefaces 
for convenient one-stop shopping. Font hosting providers became the go-to 
resource for web fonts. 

Endless font-o-graphic variety on the web would be a gleeful proposition— 
if only the fonts themselves were up to the task of looking good and holding 
their shapes across a mixed bag of rendering environments. In reality, most 
fonts offered by web hosting services fall short of what is demanded by 
today’s uneven technologies. 

Initially, type designers lashed out against the web font explosion, which 
raised a myriad of problems. Typefaces that looked great on a Mac fell apart 
in Windows; variations among browsers and operating systems broke designs 
and ruined reading experiences. Poorly optimized fonts were swamping 
the web. Before 2008, the classic web fonts Georgia and Verdana had set a 
narrow horizon of choice, but they were flexible, consistent, and screen-ready, 
meticulously designed to function on screen. With the flood of fonts now 
available for use, designers were free to make poor choices, using display 
fonts for body copy, applying faux bolding and italics, and picking type on 
a Mac without checking it in Windows. Today, designers and foundries are 


working to create typefaces that can withstand the hardships of life on screen. 


REINVENTING GEORGIA AND 
VERDANA These classic web 
fonts, designed by Matthew 
Carter for Microsoft in 1996, 
were engineered to display 
consistently across platforms, 
thanks to immaculate hinting 
by Tom Rickner. In 2011 Font 
Bureau, Carter & Cone, and 
Monotype Imaging released 
extended families of these 
web classics. Design: Matthew 
Carter, Steve Matteson, and 
David Berlow. 
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RENDERING TYPE ON SCREEN 


How a font looked on screen used to be just an issue of representation; you 
could rely on the printing process to make it look better. But nowadays the 
screen is often the final output. Many products of interaction design must 
perform across multiple platforms, browsers, and devices, each of which 
translates the vector soul of a typeface into digital rasters of diverse and 
sometimes monstrous shapes. The user’s device could be mobile or desktop, 
Mac or Windows; it could be an LCD monitor, an Apple iPad, an Amazon Kindle, 
or a Blackberry Playbook. (Probably not that last one, but anything is possible.) 

There are different font formats, including TrueType, favored by Windows, 
and PostScript, created for the Mac. PostScript fonts allow the operating 
system or browser to figure out how to best translate a character’s precise 
vector outlines onto the cruder grid of the screen. PostScript fonts look good 
on any system that displays them; as rasterizers improve, the typefaces follow 
along. A TrueType font, on the other hand, carries around its own instructions 
for making the leap from outline to raster. These instructions—called hinting— 
demand many hours of specialized labor and are a stubborn obstacle to 
achieving universal web typography. 

According to type designer Peter Bil’ak, 99 percent of fonts lack hinting, 
which makes them display poorly and inconsistently on the Windows systems 
that still dominate the Earth. Typography’s lucky 1 percent includes web 
stalwarts such as Georgia and Verdana as well as Bil’ak’s own typeface, Fedra, 
meticulously hinted for display on screen. Hinting tells the operating system 


“How did you trace it, then?” 
He took a large sheet of paper from his pocket, 
all covered with dates and names. 


“IT have spent the whole day,” said he, “over 
Lloyd’s registers and files of the old papers, 
following the future career of every vessel which 
touched at Pondicherry in January and February 
in '83. There were thirty-six ships of fair tonnage “Font Hinting,” Typotheque, 2010, 
which were reported there during those months. https://www.typotheque.com/ 
Of these, one, the Lone Star, instantly attracted 
my attention, since, although it was reported as 
having cleared from London, the name is that 
which is given to one of the states of the Union.” SHADES OF GRAY E-readers such 

“Texas, I think.” 

“T was not and am not sure which; but I knew 
that the ship must have an American origin.” 

“What then?” employing just a few shades of 

“I searched the Dundee records, and when I gray. Shown here is a screenshot 
found that the barque Lone Star was there in F : 

i ee 5 from the Kindle Paper White. 
January, ’85, my suspicion became a certainty. I 
then inquired as to the vessels which lay at 
present in the port of London.” 


READ MORE >> Peter Bil’ak, 


articles/hinting. 


as the Amazon Kindle provide a 
relatively coarse rendering of type, 


or browser to adjust such features as height, stem width, white space, the 
slant of italics, and the relationship between uppercase and lowercase letters. 
Hinting creates a sharper look by increasing contrast along the edges of the 
letterforms, at the expense of preserving character shape and the space 
between letters. Depending on the kind of output, from the harsh extreme of a 
black-and-white bitmap to the soft, antialiased outlines of a grayscale monitor 
to the RGB subpixel rendering made possible by LCDs, hinting instructions 
vary. Hinting also transforms the shape of the letters based on the size 

at which they are displayed; the forms of a well-hinted font can change 
substantially from size to size. 
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FEDRA TAKES A HINT At the core of any digital font is an essential set of points 

and curves. How that vector essence becomes rasterized reality is a matter of 
intrepretation. Hinting is a set of instructions that tells the rasterizer of a browser or 
operating system how to reposition a typeface’s outlines for better display at different 
sizes, conforming to the pixel grid of the screen. Design: Peter Bil’ak, Typotheque. 
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TYPE ANATOMY AND TAXONOMY 


Choosing typefaces can be a bewildering task. Understanding how the 
proportions of letters affect their visual impact and knowing how a type 
design fits into the broader history of typography can help. Many of the 
typefaces we use today are based on designs produced hundreds of years 
ago. Classical serif faces, introduced in the fifteenth century, imitated older 
media—handwriting and stone carving. In the nineteenth century, printers 
devised simpler, bolder sans serif forms to meet the needs of commercial 
advertising. Slab serifs—also first appearing in the nineteenth century— 
have chunky, geometric endstrokes with as much heft and presence as the 
main strokes of the letters. Slab faces are popular on the web because they 
combine aspects of both sans serif and serif letterforms, and they function 
well in light and heavy weights, enduring the rigors of rasterization. 


CAP HEIGHT ASCENDERS LIGATURES combine two characters 
The distance from the Some elements (such as fi, fl, or ff) into one glyph, 
baseline to the top may extend slightly preventing awkward bumps and grinds. 


of the capital letter above the height of 


determines the letter’s the capital letters. 


measured size. 


MINION PRO 


DESCENDERS 
A typeface with longer 


OVERHANG The bottom 


© X-HEIGHT refers to the strokes of curved letters 


vertical dimension of the 


descenders and ascenders (s, t, u) hang slightly below 
main body of a lowercase may require moreline spacing —_ the baseline. Commas and 
letter (the height of the (line height). semicolons also cross the 


lowercase x). A typeface baseline. Without overhang, 


whose x-height is large in THE BASELINE is where all a rounded letter would look 
proportion to its cap height the letters sit. This is the smaller than its flat-footed 
looks bigger than a typeface most stable axis along a line friends. Overhang also helps 
with a smaller x-height. of text, and it is a crucial edge rounded letters appear to sit 
Typefaces with large for aligning text with images stably on the baseline. 
x-heights can be a good or with other text. 


choice for screen. 
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HUMANIST 

The roman typefaces of 

the fifteenth and sixteenth 
centuries emulated classical 
calligraphy. The ribbonlike 
strokes and angled stress of 
Minion, designed by Robert 
Slimbach for Adobe (1990), 
exemplify the humanist style. 


HUMANIST SANS SERIF 
Sans serif typefaces became 
common in the twentieth 
century. Gill Sans, designed by 
Eric Gillin 1928, has humanist 
characteristics. Note the 
small, lilting counter in the 
letter a, and the calligraphic 
variations in line weight. 

Gill Sans is found on many 
operating systems. 
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HUMANIST SLAB SERIF 

Also called “Egyptian,” 

slab serifs appeared in the 
nineteenth century. Tisa, 
designed by Mitja Miklavéié in 


2008, has an angled stress and 


serifs that have been softened 
with subtle curves, reflecting 
the humanist tradition. 
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TRANSITIONAL 
Typefaces with sharper 
serifs and a more vertical 
axis are known as 
transitional. Carter's web 
classic Georgia (1996) 
embraces these upright 
qualities. 
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TRANSITIONAL SANS 
SERIF 

Helvetica, designed by 
Max Miedinger in 1957, is 
available on most users’ 
computer systems. Its 
uniform, upright character 
makes it similar to 
transitional serif letters. 
Helvetica is considered an 
“anonymous sans serif.” 
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TRANSITIONAL SLAB 

Carol Twombly’s Chaparral 
(designed between 1997 and 
2000) has gently modulated 
forms and sleek slab serifs. 
Typefaces like Chaparral 
make for readable text as 
well as distinctive heads 
and subheads. 


MODERN 

Giambattista Bodoni 
designed high-contrast 
typefaces with razor-sharp 
serifs. The forms of Bodoni 
are generally considered too 
high-contrast for screen 
reading. 
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GEOMETRIC SANS SERIF 
Some sans serif types are 
built around geometric 
forms. In Futura, designed 
by Paul Renner in 1927, the 
Os are perfect circles, and 
the peaks of the A and M 
are sharp triangles. Futura 
is a widely distributed 
typeface. 
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GEOMETRIC SLAB 
Architects are often drawn 
to slab serifs with a stark 
geometric style, such as 
Kulturista (above) and 
Rockwell (by Frank Hinman 
Pierpont). These faces have 
big, structural slab serifs and 
minimal modulation. 
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HEADS AND BODIES 


On screen, as on the printed page, written text falls into two main categories: 
body and head. Body copy is the principal reading matter of a text, while 
heads are shorter pieces of text that call out sections and subsections. 
A designer may choose to set a text entirely in a single type family, using 
different weights, sizes, and styles to distinguish the parts from the whole. 
Alternatively, designers can assemble a mix of diverse type families to create 
clear visual distinctions between elements of content. 

A list or a block quote should look like a subset of the main text, 
while a caption can be more visually distinct. Headings should reflect the 
relative importance of the text that follows. By using type to signal levels 
of information, designers help readers graze through a document at their 
own pace, picking and choosing the content they want. Some may only read 
captions and headings, while others want to dig deep and pursue an argument 
or narrative from beginning to end. 


DISPLAY FACES are designed primarily for h 
forms or extreme proportions become tireso 
quantities. Think of display faces as garnish 
meat and potatoes of basic body text. 


League Gothic Prater Script 


from the League of Moveable Type from FontFo 


Designed by Micah Rich with Caroline Hadilaksono Designed by Henning Wegenbreth and Steffen Sauerteig 


LEAGUE GOTHIC is a product of the League of Prater is a beer garden in Berlin whose graphic 
Moveable Type (LMT), a group that offers typefaces identity was handmade by, artist-illustrator 


for free download to the open-source community. Henning Wagenbreth. Wagentreth’s lettering 


LMT supports freeware, copyleft, and related ideas. was the faunching point for this playful tyne 
LEAGUE GOTHIC is based on Morris Fuller Benton's family, digitally reconstructed by Steffen 


Alternate Gothic No. 1, a compressed typeface $ ig. To approximate the i 
that embraces the loud and excitable aesthetic of }=©=» of hand Lettering, each weight comes in tur 
twentieth-century news media. versions. 


Some typefaces are designed specifically for body text. Type designers 
work hard to create typefaces that fly under the reader’s radar, using subtle, 
well-crafted forms and evenly spaced characters to achieve effortless 
reading. A good text family includes multiple weights and styles (roman, 
italic, and bold, at the very least) suitable for expressing a rich hierarchy of 
information. A text face with appealing details can also be used for heads, its 
character changing as it moves up in size. 


MINION PRO A single family can be used for headings and body 
text. The italic enlarges to become a handsome title, while the 
small caps provide quiet subheads. 


Cinderella 


ACT ONE: STATUS QUO 


Many years ago a gentleman had a charming lady for his wife. 


When their daughter was very young, the mamma died. After 
a time, the little girl’s papa married another lady, who had two 
grown daughters as disagreeable as herself. 


ACT TWO: CALL TO ACTION 

The King’s son gave a grand ball, and all persons of quality 
were invited. In Cinderellas home nothing was talked of but 
the rich dresses the two sisters were to wear. At last the happy 
day arrived. The two proud sisters set off in high spirits. When 


HEADLINES 


47% Serif 


BODY COPY 
36.5% Sans 


PRATER SCRIPT AND SKOLAR Here, a fancy display face offers 
a counterpoint to a more traditional text face. 


Cinderella 

ACT ONE: STATUS QUO 

Many years ago, a gentleman had a charming lady for his 
wife. When their daughter was very young, the mamma 


died. After a time, the little girl’s papa married another 
lady, with two daughters as disagreeable as herself. 


ACT TWO: CALL TO ACTION 

The King’s son gave a grand ball, and all persons of qual- 
ity were invited. In Cinderella's home nothing was talk- 
ed of but the rich dresses the two sisters were to wear. 
At last the happy day arrived. The two proud sisters set 
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A BRIEF SURVEY OF WEB FONTS 


The purpose of this guide is to help designers and developers make smart 
typographic decisions on the web. From the enormous range of fonts now 
available for online licensing, we have chosen a small selection of prominent 
typefaces—produced by foundries large and small and created by designers 
from around the world—that have proven popular among web designers. We 
examined how each typeface renders on different operating systems and 
browsers and rated each typeface for its legibility, readability, flexibility, 
showmanship, classiness, and what we call amphibiousness. Also included are 
some taster’s notes on history, style, and sensibility. At the end of the day, 
these judgments are more subjective than scientific; you will need to test any 
typeface against your own content, intentions, and personal preferences until 
you hit just the note you are looking for. 


THE RATING SYSTEM 


e “ LEGIBILITY FLEXIBILITY G CLASSINESS 
How distinct are How well does the Would it take you 


the characters from one typeface work in to Red Lobster? Would you buy 


another? Typefaces that are 
highly modular or geometric 
may be less legible than 
those with more organic and 
individualized forms. 


AN READABILITY 
How comfortable 
is the typeface to read in body 


copy? Does it invite long-form 
reading and writing? 


different sizes and weights? 
Would it function well for both 
headlines and text? A flexible 
typeface can solve many kinds 
of problems. 


S SHOWMANSHIP 
SS How memorable is 
the font? How unique 
are its details? Does it have 
a standout Q or spectacular 
numerals? Does it look 
amazing when blown up toa 


large size? 


it a diamond ring? 


AMPHIBIOUSNESS 

Has it been optimized 

for screen? How well is 
it hinted? If a font only looks 
good ona Mac, it scores low on 
the amphibiousness scale. 


BAKER’S FOURTEEN Like any top-ten 
list, our baker's dozen (plus one) is an 
arbitrary sampling from the wildly 
diverse typographic biosphere. Dozens 
of other designs could take the place 

of most of the typefaces listed here. 
When you find a typeface you like, look 
for more created by the same designer 
or foundry. The choices are endless and 
growing in number every day. 


SERIF 


Fedra Serif 
Georgia 
Meta Serif 
Minion 
Skolar 


SANS 


Dagny 

DIN 

Helvetica 
Proxima Nova 


SLAB 


Adelle 
Chaparral 
Kulturista 
Museo Slab 
Tisa 
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Adelle 


from Typetogether 


Designed by José Scaglione and Veronika Burian 


Adelle works well both in print and on 
screen. Created for publication design in 2009, 
this family has flourished on the web. Adelle’s 
open, boxy forms and generous x-height 
make it legible at small sizes. Scaled up for 
headlines, Adelle begins to flaunt her friskier 
side, with decisive details and sweetly 
angled serifs. Adelle’s warm but modern 
demeanor fits the approachable aesthetic so 
sought after by web designers. 
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Chaparral 


from Adobe 
Designed by Carol Twombly 


Chaparral has the heft of a slab serif and the 


smooth-bodied proportions of a roman book 


face. In this way it resembles Adelle and Meta 


Serif, though it has softer details and greater 


line variation. Designed in 1997 by Twombly, 


Chaparral was a bit of a wallflower in the age of 


print; as a web font, its popularity has soared, 


offering a comfortable reading experience and 


bold, memorable headlines. Chaparral provides 


excellent support for Eastern European languages. 
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Dagny 
from FontShop 
Designed by Orjan Nordling and Géran Sédestr6m 


Dagny was created for the Swedish newspaper 
Dagens Nyheter in 2002. Its large x-height, open 
forms, and relatively narrow width keep it read- 
able at small sizes. Dagny is a strong choice for 
designers who want the bold corporate look of 
Helvetica without creating yet another website 
relying on the ubiquitous typeface. Like all web 
fonts from FontShop, Dagny has been fully 
optimized for online display. 
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from Parachute 
Designed by Panos Vassiliou 


DIN (which stands for Deutsches Institut fur 
Normung) became a standard signage face in 
1940s Germany and was used in trainyards 
and on highways. There are many cuts of 
DIN, including Vassilou’s family for Parachute 
(shown here] and Albert Jan-Pool’s version 
for FontShop. With its hard angles and boxy 
geometry, DIN is appropriate for headlines 
wherever a bold and architectural look is 
required. Its tall x-height and open shapes make 
DIN a decent body type as well. 
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Fedra Serif 


from Typotheque 
Designed by Peter Bil’ak 


Fedra Serif, created by Bil’ak in 2003, belongs 
to the vast Fedra superfamily, a coordinated 
collection of typefaces that includes both 
sans and serif variants. Superfamilies such 
as Fedra provide designers with a diverse 
set of faces that are unified by matching 
x-heights and ascenders and descenders of 
consistent length. Shown here is Fedra 
Serif A, whose low-contrast strokes make 
this typeface especially suitable for display 
on screen. 
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Georgia 
from Microsoft 
Designed by Matthew Carter 


Georgia was custom built for on-screen 
display in 1996. Similar in some aspects to 
Times New Roman (compare the lowercase a), 
Georgia has a larger x-height and more open 
forms. Because it already exists on virtually 
every modern operating system and has been 
meticulously hinted to render handsomely 
across platforms, Georgia remains popular 
(and practical) on the web. It functions well at 
smaller sizes, but doesn’t carry much weight as 
a display face. 
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Helvetica 


from Apple OS 
Designed by Max Miedinger with Eduard Hoffmann 


Helvetica, one of the world’s most widely used 
typefaces, was designed in 1957 to compete with 
the then-popular Akzidenz-Grotesk in Switzerland. 
Helvetica quickly became a ubiquitous feature 

of the commercial and corporate landscape, 
alternately loved and reviled by generations of 
designers. Apple adopted Helvetica as its system 
sans serif face on Mac OSX, where it is legible 

at small sizes. Helvetica performs worse on 
Windows, where Arial and Verdana fare better. 
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Kulturista 


from Suitcase Type Foundry 
Designed by Tomas Brousil 


Kulturista is the most geometric slab 
serif on our list. Designed by Brousil in 
2009, Kulturista was introduced asa 
companion to Nudista, a boxy sans serif 
conceived for publication. Kulturista's 
balance of architectural slabs and 
bubbly geometric curves has helped it 
achieve popularity among web designers. 
Kulturista shows a lot of personality 
(especially in the light and bold weights 


shown here). 
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Meta Serif 


from FontFont 


Designed by Erik Spiekermann, Christian Schwartz, and Kris Sowersby 


Meta Serif was conceived as a companion 

to Meta, Spiekermann’s hugely popular sans 
serif type family. This companion creation, 
however, quickly took off on its own. Endowed 
with a gracious x-height and lightly bracketed 
serifs, Meta Serif is taller and narrower than 
classic serif faces. Its economical, space- 
saving proportions, coupled with its excellent 
hinting and early introduction into the web font 
ecosystem, have made Meta Serif a worldwide 
success, especially for body text. 
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Minion 
from Adobe 
Designed by Robert Slimbach 


Minion, created by Slimbach for Adobe in 1990, 
takes inspiration from late Renaissance typography, 
which introduced roman letterforms as a humanist 
alternative to medieval blackletter scripts. Minion— 
by far the most traditional typeface on our list— 
sets beautiful body copy that is comfortable to 

read. The calligraphic details of Minion become 
more visible at larger sizes, making this typeface a 
sophisticated choice for headlines. 
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Museo Slab 


from Exljbris 
Designed by Jos Buivenga 


Museo Slab was launched by Buivenga 

in 2009 as a free font. As the typeface 
burgeoned in popularity, Buivenga added 
weights to it, finding a ready market for 
this distinctive family whose half-slab 
serifs resemble bent pipes. (Several weights 
remain available for free download.) While 
it makes an assertive but intriguing text 
face, Museo Slab works especially well for 
headings and display. 
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Proxima Nova 


from Mark Simonson Studio 
Designed by Mark Simonson 


Proxima Nova is a sans serif face that combines 
humanistic lines (take note of the modulated 
strokes) with geometric precision (as seen 

in the nearly round o). This hybrid personality, 
combined with an extensive range of weights 
and widths, has made Proxima Nova a widely 
used workhorse among web designers. You 
are as likely to find Proxima Nova boldly aping 
Futura in a heavyset headline as you are to see 
it gracefully accompanying other typefaces as 
quiet and legible body text. 
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Skolar 


from TypeTogether 
Designed by David Brezina 


Skolar, released in 2008, is a sturdy serif face 
with distinctive wedge-shaped serifs. Available 
in a wide range of weights and with a character 
set that supports diverse languages, Skolar 
was designed for typesetting complex editorial 


projects, including scholarly works. At once 
chunky and elegant, it stands up well to the 
rigors of the screen. The capital letters are 
slightly shorter than the ascenders, which 
lightens the overall heft of Skolar and makes 
room for uppercase diacritical marks. 
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Tisa 
from FontFont 
Designed by Mitja Miklavéié 


Tisa, designed by Miklavéié as a degree 
project at the University of Reading, has 
become a popular web font. Tisa sought out a 
new approach to the slab genre. Its serifs are 

a bit soft and asymmetrical, while its oblique 
stress recalls the humanist calligraphic 
tradition. With its low-contrast strokes and 
large x-height, Tisa works well as a text face at 
small sizes, while its surprising details make 
it stand out effectively in larger headings. 
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GOOGLE FONTS 


As a serious designer you may think that free fonts are a joke, but this is 
not always the case. Google has amassed a library of free fonts that are 
reasonably well designed. The company, which pays current market rates 
to commission its type designs, hopes that access to free web fonts will 
encourage designers to use real type in place of graphic GIFs in order to 
create searchable, translatable text. 

We asked our friend Dave Crossland—type designer, educator, and 
font consultant for Google Fonts—to select five typefaces from Google’s 
library that exemplify solid typographic values. He chose fonts that render 
well across platforms and browsers and identified some workhorse fonts 
appropriate for body text, heads, and subheads. While some of his picks 
lack the full range of weights demanded for complex web typography, 
these fonts will prove valuable for many purposes. What emerges from 
this list is a picture of a vibrant global type design community. 


PT Sans and Serif 

al A Designed by ParaType 
Developed by Russia's largest and most prestigious digital type 
foundry, ParaType, PT Sans and PT Serif comprise an 

ad expansive superfamily with top-quality hinting. Funded by 
the Russian federal government, these fonts have an 


unprecedented character set to support writing every name 
in the Cyrillic world. 


Alegreya 
Designed by Juan Pablo del Peral at Huerta Tipografica 


Typeface design is an increasingly hot topic for graphic design 
students around the world, and the scene in Latin America is 
a A among the most active. Huerta Tipografica is a new foundry 
formed by friends who met while taking part in the 
postgraduate program in typeface design at the University of 


Buenos Aires. Alegreya is their award-winning serif text type. 


Andika 


Designed by Annie Olsen at SIL International 


SIL International is a faith-based nonprofit 
organization committed to serving language 
communities worldwide as they build capacity for 
sustainable language development. That means 
providing free digital typography tools, including 
Andika, a typeface designed for kids. 


Montserrat 


Designed by Julieta Ulanovsky 


Unlike typical revival projects that remake existing 
typefaces, Montserrat is an attempt to save 
vanishing commercial lettering styles. Ulanovksy 
was inspired by early-twentieth-century urban 
typography from the Montserrat neighborhood in 
her native Buenos Aires. She launched a Kickstarter 
campaign to finance the project, and when she 
raised double her target, she proceeded to design 
an Alternates set that features more uncommon 
forms (such as €, €, and W). 


Capriola 


Designed by Viktoriya Gabrowska at Sorkin Type Co. 


Pushing the boundary between display and body 
type, Capriola ambitiously seeks originality 
without sacrificing readability. When people ask 
the common question, “Why design new type- 
faces?” designs like this one prove that there is 
so much waiting to be discovered. 
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A-SANS 


The screen poses challenges for type designers. Low pixel densities force 
designers to spend extra time fine tuning each character so it renders well on 
screen. While this hinting process usually takes place at the end of a font’s 
production, a designer can also choose to design a typeface with an eye 
toward screen use from the beginning. To create the typeface A-Sans, Young 
Sun Compton used a coarse pixel grid as a constraint throughout his process, 
rather than trying to force his drawings onto the grid later. A-Sans is a 
geometric sans serif typeface drawn for reading on screen; the resulting 
oddities of form make for intriguing off-screen reading. 
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Seventeen-day Studio = 


sos full-service graphic design studio opened March 29, 
tocated in the Meyerhoff Gallery at the Maryland Institute 
College of Art. 

Graphic design is made of contrary elements, involving a 
clash of thought, emotion, and behavior, leading us as graphic 
designers toward eccentric perceptions, inappropriate actions 
and feelings, our withdrawal from reality into fantasy or 
delusion, and a sense of mental fragmentation. 

The Seventeen-day Studio specializes in editorial projects, 
identities, posters, and websites until forced to. close our doors 
seventeen days later on April 14, 2013. If you are interested in 
working with us, or just want to say hello, send an email. 


BEHIND GLASS A-Sans was drawn to function on- 
screen as a web font as well as in print. The designer 


has employed it everywhere from websites to 1000pt 
vinyl wall graphics. Design: Young Sun Compton, 2013. 
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MUTABLE TYPEFACES 


Researched by Rolando G. Alcantara 


A mutable typeface gives a designer multiple ways to typeset the same 
message. If a typeface comes with an alternate A, the designer has two 
different ways to typeset the word “Apple”—one with the standard A and one 
with the alternate character. A typeface with an alternate for every letter in the 
alphabet gives the designer many more possibilities to set the same word 
(thirty-two, to be exact). Although mutable typography is not exclusive to 
screen design, the concept of change and variation lends itself to animation. 
Indeed, many experiments in mutable typography address the nature of fonts 
as software, adding new functionality to the art of typesetting. 

Some mutable typefaces employ a carefully curated collection of ligatures 
and/or alternate characters. Others feature nonalphabetic ornaments that the 
designer can use to embellish the text. Still others use additive layering, a 
technique that allows each style within the type family to act as a different 
structural or decorative element, such as an inline character or a flourish. 

The typeface Walker, designed by Matthew Carter for the Walker Art Center 
in 1995, employs five different styles and weights of “snap-on” serifs, yielding 
numerous variant styles while maintaining a unified look. Walker also includes 
horizontal rulers that serve as underlines or “overlines” from which to hang 
the text. 

Ed Interlock, created by Ken Barber and Ed Benguiat, employs nearly 
fourteen hundred discretionary ligatures. Ed Interlock was released by House 
Industries as an homage to Benguiat, who created hundreds of typefaces in 
the 1960s and 1970s. 

Julien, a typeface with more than a thousand alternate glyphs, was 
designed by Bil’ak for Typotheque in 2011. Julien is loosely inspired by the 
avant-garde design movements of the twentieth century. Texts set in Julien 
resemble collections of iconic geometric letters that have been carefully 
curated and recombined. 


Walker for the Walker Art Center 


in Minneapolis, introducing the 
notion of the snap-on serif. 
Design: Matthew Carter, 1995. 


ED INTERLOCK As the word ligature is typed, 
the font software actively searches through its 
stock of ligatures to find the best combination 
of glyphs to achieve a customized, hand-drawn 
feel. Design: Ken Barber and Ed Benguiat, 
House Industries, 2005. 
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JULIEN uses a pseudo-randomization script written by Tal Leming, which chooses 
from more than a thousand glyphs to avoid repetition while creating a unique flow 
of shapes. Design: Peter Bil’ak, Typotheque, 2011. 
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HISTORY Based ona skeleton of Roman inscriptional capitals, History is 
composed of twenty-one styles. Each one acts as a layer that can be mixed 

and matched with others to achieve a beautiful, varied look with depth and 
dimension. The layer options range from a basic sans serif hairline to ornamental 
outline shapes and a variety of serifs. Design: Peter Bil’ak, Typotheque, 2008. 
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‘CASE STUDY 
ALPHABETA 


The premise for Alcantara’s typeface AlphaBeta is to create as many different 
legible glyphs for each character as possible based on a simple set of rules. 
Alcantara decided that AlphaBeta would be monospaced—meaning that every 
glyph would have the same width; it would be unicase (mixing upper- and 
lowercase characteristics); and it would be geometric and sans serif. He 
created a kit of parts for constructing the letterforms based on a square grid, 
with elements consisting of two curves, three angles, and a series of straight 
lines. The designer distilled eight alphabets from hundreds of iterations. 

After establishing his alphabets, Alcantara made font files and converted 
them into web fonts. His system employs JavaScript in the browser (rather 
than coding native to the font file) to pick a glyph for each character at random 
every time the webpage is reloaded. 
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(CASE STUDY. 
HISTORY + HIPSTER = HIPSTORY 


A hipster sensibility—seeking out the latest in music, fashion, technology, 
and the arts—has spilled over into type design. Alcantara was inspired by the 
layering technique used in Bil’ak’s History. The designer identified various 
trends in contemporary “hipster” typefaces and noted that they all leave 
humanist broad-pen strokes behind for a more geometric, low-contrast 
approach. Most are either wide and squat or tall and condensed. Sans serif is 
the style of choice, but the slab serif has made a strong comeback. Some are 
modular, and many use decorative features to stand out, such as bevels, 
embossing, and drop shadows. Alcantara’s drawings for Hipstory began with 
a base layer of an all-caps, hairline-thin, sans serif alphabet. On top of that 
he added different layers that follow the basic structure of the substrate. He 
invited other designers to add layers as well. 


HIPSTORY HIPSTO 
HIPSTORY = So ' 6 
HIPSTORY HIPSTO 
HIPSTORY HIPSTO 


by a “hipster” 
typeface design and employs 


ie 


es 
RX \ 


RY 
RY 
RY 


HIPSTORY has wide 
geometric shapes inspired 


approach to 


the layering technique 
created by Bil’ak for his 
typeface History. Design: 
Rolando G. Alcantara, 2012. 
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ZXX TYPE SPECIMEN 
POSTER Each weight 
of ZXX presents 

a different way to 
evade the efforts of 
machine readers. 
Design: Sang Mun, 
ZXX, 2012, http://z- 
x-x.org/. 


‘CASE STUDY. 
ZXX: DISRUPTIVE TYPOGRAPHY 


While working as a contractor for the United States National Security 
Administration during his service in the Korean military, designer Sang Mun 
was surprised to learn how easy it is for governments and corporations to 
capture and decode information from “defense targets.” Mun was moved 

to create ZXX, a disruptive typeface designed to be unreadable by text- 
scanning software. ZXX intentionally confuses the software by obscuring the 
letterforms with various kinds of noise and visual misdirection. In order to foil 
the efforts of hackers, cyberthieves, and government agencies, each weight 
in the ZXX family (Sans, Bold, Camo, False, Noise, and Xed) is designed to 
disrupt machine readers in a different way. In the spirit of transparency and 
open information, Mun offers the typeface as a free download on his website. 
The name ZXX refers to the three-letter codes used in libraries to classify 
books; the ZXX designation means “no linguistic content; not applicable.” 
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IN THE CLASSROOM: TYPEFACE DESIGN 
WITH TAL LEMING 


Students in Tal Leming’s workshop at MICA were challenged to develop 
a typeface in just three weeks. Using found type, such as letters from 
public signs, as inspiration, students first made drawings by hand, then 
digitized their letterforms and created type specimens. 
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e look from the Milky Way 
into the universe beyond. 


Life and time are enriched by science and technology. 
The pearl of our night sky welcomes Earthlings to 
reflect on our past home and prepare us for a future 
of exploration, discovery, and the marvels of space. 
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FRIENDSHIP AND PROSPERITY 
? Moon Bounce 
® Hall of History 
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Intergalactic Library 
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YOUNG SUN COMPTON So you picked some fonts. Now what? Typography isn’t just 
about choosing typefaces. It’s about what you do with them. 
Once you choose one or two type families that fit the context 
and content of your project, you are ready to tackle the principles 
of typographic composition. Designers manipulate size, contrast, 
weight, color, rhythm, texture, and hierarchy in order to craft 
pleasing and compelling reading experiences. Good typography 
often goes unnoticed, melting into the background. Bad 
typography, on the other hand, jumps out like a scary clown, 
making a project look amateur, artless, or confusing. 

Imagine how your audience will encounter the content. Picture 
modern users consuming a long-form news article. Reading 
their phones on the way to work, they may be deeply immersed 
during a long commute or distractedly killing time while waiting 
for coffee. If the content is interesting and easy to read, they 
might go back to reading the piece while at the office, this time 
on a desktop or laptop, and again at home on a tablet. Strong 
web typography recognizes and responds to these varied 
circumstances. Adaptive grid structures and relative measuring 
units accommodate the diverse life of digital content. 

This chapter focuses on shaping the elements of written 
content that make up the primary body of most websites. 
Advancements in web standards are making it easier for designers 
to construct refined typographic systems. While myriad screen 
sizes and resolutions can rattle the user experience, designers 
employ a range of techniques to maintain a pleasant reading 
environment in a future-friendly way. 


RECREATION IN WEB TYPOGRAPHY The Lost Worlds’ Fairs was 
an online publication project in which leading web designers 
exploited features of the Web Open Font Format (WOFF). 

The goal was to create beautiful, engaging typography for the 
screen with an attention to detail that rivaled the domain of 
print design. The project was initiated by Microsoft and the 
Friends of Mighty. The webpage shown here, advertising a 
fictional World’s Fair on the Moon, incorporates web fonts and 
a liquid layout. Design: Jason Santa Maria, “The Moon in 2040,” 
Lost Worlds’ Fair, 2010, http://lostworldsfairs.com/moon/. 
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CHOOSING A SCREEN SIZE 


At the beginning of any project, the designer thinks about who its users are 
and how to best reach them. How will content be delivered, and how much 
space will it occupy? Until recently resolutions and screen sizes were relatively 
consistent among users. Now desktop monitors are getting bigger and bigger, 
while mobile browsing has stolen the lead in accessing the Internet, and 
tablets hope to replace everything in between. How can designers account for 
a landscape that won’t stop changing? 

Even in the fast-moving world of web design, we can work with helpful 
standards. Influential designer Khoi Vinh, in his comprehensive 2010 book 
Ordering Disorder, recommends a screen size of 1024 x 768 pixels as a starting 
point for web designers. At that resolution smartphones can keep up while 
the project is scalable enough for larger displays. In practice 1024 x 768 is the 
approximate size for the entire screen. A host of interface elements nibble 
away at the edges of this basic slab of real estate. The designer needs to 
account for the space occupied by system menus as well as the space needed 
for the tools, bookmarks, and status bars employed by modern browsers. 
When all these elements have been subtracted, what is left for the website 
itself is a modest parcel of about 960 x 650 pixels. Subdividing that space into 
a rational column grid is the designer’s next task. 


Subtraction EE Version 7.1 Search via Google 
Khol Vinh’s Web Site Search ) 
Mon ou é iphones Ads by the Dock ‘ , 
08:19 pm Z 
; Khoi Vinh 7 
- Miscellaneous (>) 
A few years ago | accidentally bought a pair of Help Wanted SS NY 
earbud-style headphones with what | later caine 
came to learn was a “J-cord” design — one baninest 
side was longer than the other, so that you Ganis ora We Oooo Gener 
could wrap the longer side around the back Of southern Marsh Cotlction 
Graphs ana Web Designer - Santor 
your neck and let the earbuds hang off your 
‘Principal Financial Group 
shoulders when they weren't in your ears. Uiak Designer « Davek 
They were a litle awkward to manage at first, __Se4,"eremir * Partners er: 
a 9 HCE I NS eT 
SUBTRACTION Vinh has long advocated for the application of READ MORE >> Khoi Vinh, Ordering Disorder: Grid 
grids to web design. Subtraction.com, a brilliant repository of Principles for Web Design (San Francisco: Peachpit 


Vinh’s ideas about design and technology, uses a strong grid and Press, 2010). 
elegant black-and-white typography to translate the theory and 

spirit of Swiss rationalist typography to the fluid, ever-changing 

world of the web. Design: Khoi Vinh, 2008. 


SEARCHING FOR A STANDARD A screen dimension of 1024 x 
768 offers a useful, though not absolute, standard resolution. In 
a typical browser, roughly 80 percent of that space is available 
for the page content, leaving 974 x 650 pixels for the designer 
to work with. Adding some breathing room to the left and 

right edges of the content area reduces the active real estate 

to approximately 960 x 650 pixels. Diagram based on the 
guidelines established by Vinh in Ordering Disorder, 2010. 
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THE GRID 


Since the 1950s print designers have used grids to organize the empty 

void of the page into columns and rows of “white space.” A digital screen 
consists of thousands of square pixels. Although technological advances have 
helped pixel elements get smaller and curves appear smoother, the screen’s 
underlying squareness hasn’t changed. Embracing the innate rectilinear 
texture of the screen, designers can define robust and flexible grids for 
arranging content. Even a simple website contains varied parts. A home page 
doesn’t serve the same purpose as an “about page” or a list of blog posts; a 
fine-grained grid serves to give these different elements a common structure 
while offering enough flexibility to support multiple templates. 


uit} 
MAKING THE GRID Working with 960 pixels of screen width, Each unit contains a 50-pixel column with a 5-pixel 
we have subdivided our real estate into sixteen equal units, gutter on either side. Principles adapted from Vinh, 


establishing the basis for a flexible, adaptable grid system. Ordering Disorder, 2010. 


BREAKING IT DOWN The sixteen units easily 
regroup into two, four, or eight larger units. 


———e———————————————————————E—————— SS’ 


A well-defined grid offers a great deal of flexibility for laying out content. 
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VERTICAL AND HORIZONTAL FIELDS 


A typographic grid consists of text columns separated by gaps or gutters. 
Johannes Gutenberg used a two-column grid in the famous Bible that 
launched the typographic revolution in the fifteenth century. Today grids for 
complex websites or publications consist of multiple columns—sixteen is not 
unusual, as seen on the previous page. 

The use of modular grids, made from vertical columns and horizontal fields, 
was pioneered by Swiss graphic designers in the 1950s. The modernist book 
designers of that period used grids of boxes to govern nearly every design 
decision, from the shape of pictures to the placement of text. 

Vertical columns predominate in most grids today. A well-designed 
magazine layout or webpage typically has a strong up-and-down column 
structure anchored by a few horizontal hanging points. 


Twitter , | 
The IPY 2012 Conference From —&2" Cigarette Butts 
Knowledge to Action. Call for —_iler-McCune 
Abstracts Now Open. e Siera Cb 
a Botot miller-mecune.com * Nearly two 


billion pounds of trash is 
coldunited.com + The IPY 2012 Conference From Knowledge to thrown on the ground every 
Action is taking place in Montreal, Canada April 22-27, 2012 and year im the form of cigarette 
will be one of the largest and most important seientific confer- buts — 4.5 trillion cigarette 
ences for polar science and climate change, impacts and adapta- butts, composed largely of fil- 
tion. The Call for Abstracts for oral and poster presentations is ters made from cellulose 
how upen. acetate, a non-biodegradable 
Conference organizers invite you to submit abstracts on the plastic. But what if all these 
latest polar science, as well as the application of polar research cigarette butts had a value? 
findings, policy implications and haw to take polar knowledge to What if you could trade them 
action. The Conference program is available at in for cash? Would they then 
www .ipyzorzmontreal.ea disappear from streets, beach- 
The Call for Abstracts closes September 30, 2011. es and parks? 
NEW Conference Website Launched 


The Patagonia Expedition Race To 
Air On Outside Television 


a The Adventure Bloy 

+ Fans of adventure 
racing will have yet another chance to catch a 
race on TV, provided you're lucky enough to 
have Outside Television in your market. ... 


Maps: Power, Plunder and 
Possession: Spirit of the Age 


© sam Wy Foeetecnnpticstne Volcano Exploration Pictures, 


bbe.couk * In a series about the extraordinary Phot 
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FLIPBOARD Calling itself a social magazine, the Flipboard app 
uses a modular grid to organize content. The table of contents 
resembles a photo gallery, while the text pages present the first 
few lines of an article that can be selected and read in full. 
Design: Marcos Weskamp, 2011. 


GRAPHIC DESIGN HACKING 


GRAPHIC DESIGN HACKING 


Graphic Design Hacking is the MFA Thesis 
Project of Cameron Zotter. Zotter is the 


designer, writer and editor of the project. 


A BOOK OF PROJECTS 


Graphic Design Hacking will feature 30 
short project prompts in the areas of art, 
design, technology and misuse. The prompts 
are designed to jump start creativity and 
provide new methods for using materials, 
tools and design thinking. 


TWITTER 


"Computers are useless. They can only give you 
answers." -Pablo Picasso 106 days ago 


EMAIL LIST 


aT 


HOME | BOOK | CONTENTS | EXHIBITION | WRITING 


Samer Toenltey 
HORIZONTAL FIELDS 
While vertical columns 
are relatively easy to 
maintain, websites 
often have varying 
lengths within a single 
site. Here the designer 
created horizontal 
fields to impose 
architecture on the 
page. Design: 
Cameron Zotter, 2012. 


ABOUT THE AUTHOR 

Cameron Zotter is a former designer for National 
Geographic in Washington, D.C. His design work has 
been published in the Type Directors Club 57th 


Annual, Feltron's Blog, Under Consideration, 


Swissmiss and Core 77 among others. Cameron is 
completing his MFA at the Maryland Institute College 
of Art in Baltimore, Maryland. 
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RESPONSIVE TYPOGRAPHY 


Designers can mitigate the problem of differing screen sizes and resolutions 
by building websites that respond to those differences. Advocates of 
responsive design plan and develop webpages that display content differently 
depending on how the user is viewing the site instead of creating separate 
stand-alone versions of sites for different devices. 

There are two approaches to responsive layout: liquid and adaptive. A 
liquid design will continually adjust and reflow to the user’s browser width. 
In contrast, adaptive layouts respond in fixed steps based on the size or 
orientation of the user’s browser or device; adaptive layouts typically provide 
configurations for desktop, tablet, and mobile display. In a liquid layout, the 
columns in a website get wider or narrower to reflow the content, while an 
adaptive design will typically switch to using fewer or more columns in a 
single grid without resizing them. Although the liquid feature isn’t noticeable 
in mobile versions, it gives users fine-grained control over the width of their 
browser windows on a laptop or desktop device. Designers can combine these 
two methods. In addition to changing the number or width of columns, 
a responsive design might also adjust type size for a better fit. 


@MEDIA QUERY Less Framework is a CSS grid system for making adaptive READ MORE >> Joni Korpi, “Less Framework 4,” 
layouts. The style sheet uses an @media query tailored to various browsers and Less Framework, http://www.lessframework.com. 
devices based on minimum and maximum widths. Shown here are measurements 

fora tablet held in portrait mode. Code: Less Framework 4 by Joni Korpi. 


we Tablet Layout: 768px. 

Gutters: 24px,. 

Outer margins: 28px. 

Inherits styles from: Default Layout. 


‘cols 1 2 3 4 § 6 7 8 

= px 68 160 252 344 436 528 620 712 a 
Thisis the @media query HERES] GRIER ah (ih =RS GENE SSB HBR WHER ESSTBRI I 

P body { 


width: 712px; 
margin: auto; 
padding: 48px 28px 60px; 


} 
.about{ 


padding-left: .25em; 
padding-right: .25em; 
¢ line-height: 140%; 
2 width: 70%; 
. margin-left: auto; 
margin-right: auto; 


‘} 
Thisisitsclosingtag |} 
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FLEXIBLE (2) FOUNDATIONS 


Responsive or not, there’s no 
reason why we shouldn’t all be 
designing and building sites on 


flexible foundations. 


This concept is nothing new, having been prophetically outlined 


@ Articles Notes Info Search 


FLEXIBLE (2 FOUNDATIONS 


Responsive or not, there’s no reason 
why we shouldn’t all be designing 
and building sites on flexible 
foundations. 


This concept is nothing new, having been prophetically outlined in 
Jon Allsopp’s 2000 article, 4 [1 “i! Web (ves. Sadly, I'm able to 
count myself among the many who, until recently, have failed to see 
the benefits of embracing the inherent flexibility of the web. Andy 
Whurtiee scans 11 wares 


The web is responsive on its own—by default. It’s us that’s been 
breaking it all these years by placing content in fixed-width 
containers. 


And here | thought I was doing the web a huge favor with my fixed 
pixel-based layouts. That isn't to say that sites I built with Paravel 
well before RWD aren't good, but their pixel-based layouts make 
them far less portable. Good design could have been made better had 
we grasped the benefits of the flexible foundation years earlier. 
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FLEXIBLE (@@) FOUNDATIONS 


Responsive or not, there’s no 
reason why we shouldn't all 
be designing and building 
sites on flexible foundations. 


This concept is nothing now, having been 


have failed to see the benefits of embracing the 
Inherent flexibility of the web. (mh: Pew see 
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RESPONSIVE WEBSITES A site with large 
images typically forces the user to zoom in 


when the same content appears on a smaller 
screen. Here the designer used a combination 
of liquid and adaptive methods to enable 
pleasant reading across devices. The mobile 
version uses one column instead of two. 
Design: Trent Walton, “Flexible Foundations,” 
2012, http://trentwalton.com/2013/01/07/ 
flexible-foundations/. 
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TYPE SIZE 


Once you have a well-planned grid in hand, you are ready to place elements 
within it. Crafting a reading platform on the web begins with finding the right 
size for your primary type. A size that you love in print will likely look too 

small on a desktop or laptop screen. People tend to hold a book or magazine 
fairly close to their faces, while they sit farther away from computer screens. 
Comfortable reading on a desktop or laptop screen thus demands larger sizes 
than print. The fuzziness of anti-aliased and backlit characters also calls for 
larger sizes. 

You might be surprised by just how big body text needs to be before it 
works well in a standard web browser. A good starting point for Georgia is 17pt, 
which is the default size of most browsers (i.e., 100 percent or 1em). From 
there you can go up or down, depending on what you are trying to do. This text 
size might seem extreme if you compare a book and screen side by side at the 
same distance from your face, but if you look at these type sizes in relation to 
the reading environment, they start to even out. 

There are four units for measuring type on screen. Pixels and points are 
absolute elements set by the browser. Employing these units can override 
users’ browser settings, which can have unintended outcomes when users 
alter their own preferences as well. Percentages and ems are scalable, 
nonfixed units, determined in relation to the browser’s current point size; these 
units are preferable because they allow end users to adjust their own browser 
preferences without breaking the design of the site. 


EM, PIXEL, POINT, OR PERCENT? Note that an intended scale shift can fail to 
render when the initial font size is set with absolute units (pixels or points). 


EMS (em) 


PIXELS (0x) 


The em is a scalable Pixels are fixed units 


unit that is equal to the used in screen media. 
browser’s font size. If One pixel is equal to one 
the font size is 14px, pixel unit on the screen. 


tem is 14px. 


POINTS (pt) 


Points are traditionally 

used in print media. One 
point is equal to 1/72 of 
an inch. 


PERCENT (*) 


The percent unit 
functions similar to the 
em unit. If the current 
font size is 14px, then 
100 percent is 14px (and 
120 percent is 16.8px). 


COMPARE IN PERSPECTIVE Computers generally sit farther 
from the user’s face than handheld reading devices such as 
books or phones. Letterforms appear fuzzy because of low pixel 
densities and backlighting. Don’t compound those issues by 
making the type too small. 


fC «ry 


O 


SMALL SCREENS AFFORD SMALLER TYPE 
Type on mobile devices can be smaller than 


ona desktop, because users can adjust the 
distance between the screens and their faces 
to achieve the best type size for them. 


READ MORE >> Oliver Reichenstein, 
“Responsive Typography: The Basics,” 
Information Architects, June 1, 2012, 
http://ia.net/blog/responsive-typography- 
the-basics/. 


21PX 


11 PX 


d is not a camera. S 
D see, or, as Anais N 


ire, we see them as | 


that our perception 
of what we expect 


Reason is based on 


“Up to now it has | 
must conform to th 
whether we do not 


hediately after the release of the new 
Hia rapidly reacted. “Great,” “bold,” “4 
he of the initial glowing endorsements 
bet (EJ). However, what has been lal 
\ch is a masterclass of ambiguity and 
bnsequential buzzwords and the stud 


he essay “On the Uselessness of Dy 
kamura alerts readers to the naiveté 
cription was no exception, with Waltq 
production” (1936) and Raymond Wil 
hg vaguely invoked and loosely syntl 
B quick prop to their argument. 


‘amura also points out the need for q 
biplines’ discourses and especially fr 
Bet has at least the ambition to situat 
jcality to their practice. But they stum 
olete and of questionable relevance. 


N33uI3S NOLX4L \\65 


N33uY9S NO JadAL \\ 09 


PARAGRAPH BLOCKS 


In CSS the paragraph element contains the main text and should be the 


basis for the rest of the layout. Paragraph blocks are defined by their width, 
alignment, and spacing. Select an appropriate width based on such factors as 
content type, font choice, type size, the distance of the user from the screen, 
and the underlying column grid. It is widely accepted that forty-five to seventy- 
five characters per line makes for a comfortable measure. You don’t want the 
user to get tired by the end of the line or have too little time before jumping 
down to the next one. Finding this golden width will require trial and error. It 
often helps to take a break, step back, and ask another set of eyes to test and 
evaluate your blocks of text. 

Paragraphs that are meant to be read in succession should be treated as 
parts of a whole. Because paragraphs are block elements, HTML automatically 
inserts extra space after them. Therefore web texts tend to be chopped up 
with inter-paragraph spacing. Try indenting the first line and removing that 
pesky extra line space. Indented paragraphs have been classic fare in print 
typography since the seventeenth century; the efficient and elegant indent 


saves space and preserves the compact unity of running text. 


PARAGRAPH INDENT Use the text-indent property in CSS to indent 
the first line of a paragraph. You will also need to remove extra line 
spacing by setting the top margin to 0. Note that the text-indent 
property will affect a// paragraphs. Designers and editors generally 
prefer to avoid indenting the first paragraph in a document; you can 
achieve this with a sibling selector (+). 


READ MORE >> Richard Rutter, Section 2.3.2. in The Elements 
of Typographic Style Applied to the Web: A Practical Guide to 
Web Typography, http://webtypography.net/Rhythm_and_ 
Proportion/Blocks_and_Paragraphs/2.3.2/. 


la 


rolling, || Doth glance from heaven 
to earth, from earth to heaven; || 
And, as imagination bodies forth || 
The forms of things unknown, the 
poet's pen || Turns them to shapes, 
and gives to airy nothing || A local 
habitation and a name." 


the supremacy of our creative 
imagination let us make empty space, 
in order that we may therein build up a 
new universe. Let us wave the wand of 
our power, so that all created things 
disappear. There is no world under our 
feet, no radiant clouds, no blazing sun, 
no silver moon, nor twinkling stars. We 
look up, there is no light; down, 


through immeasurable abysses, there 
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Improving the Digital Reading Experience 


BY OLIVER REICHENSTEIN 


There is a difference between checking Google Maps on your iPhone and 
asking a stranger for directions. It matters whether you listened to 
Beethoven’s 9th in a concert hall or in your living room, whether it plays 
from a vinyl LP or from your iPod. King Lear is not one and the same 
experience when seen at the theatre, studied on paper, or scanned on 
your Kindle. 


It is not always easy to discern digital and analog experiences. A lot of seemingly 
analog devices have digital technology built in without us realizing it (tape decks, 
ovens, cars), and, as you might have noticed, more and more digital devices try to 


look and feel like analog tools. 


The technology below the surface — whether it is manual, mechanical, automatic or 
digital — is not what matters. What matters is not the schematic of a device, but 
what we think, do, and feel when using it. What makes a CD digital is that we do not 
need to turn it over half way through, that it can play single songs precisely, that it 
can play the songs in random order, that when it’s scratched it sounds like a techno 
track and not like something that has a scratch, and that we do not know or care how 
it works. Whether we call something “digital” or “analog” depends more on the way 


we perceive, understand and use a device than the ghost in its shell. 


Whether you read text on paper, a cathode ray tube monitor, an LCD screen, or e- 
ink, whether you read in indirect or direct light, high or low resolution, and whether 
the text is at arm’s length or not is one side of the equation. The other side is defined 
by you as the reader: Where are you, what are your motivations and what are your 


goals? 


To optimize the reading experience, no matter whether in print or on the screen, we 
need to understand the humane function of a computer, and examine the differences 
between digital and analog reading experiences. Then we can think about ways to 


improve the experience to get better results for the reader. 


I will try to sketch out how to do this in the following 14 minutes of text. 


< OLDER NEWER > 


FOR GOOD MEASURE The line lengths on 
the Information Architects website have 


been designed for comfortable reading. Ona Experience 
desktop browser, users see around sixty-five BY OLIVER REICHENSTEIN 
characters per line. The type size is reduced 

on the mobile version to fit roughly fifty-four | 


characters per line. Both numbers fall within 
the desired range of forty-five to seventy-five 
characters. Design: Information Architects, 


Improving the Digital Reading 


There is a difference between checking Google Maps on 
your iPhone and asking a stranger for directions. It 
matters whether you listened to Beethoven's gth in a 
concert hall or in your living room, whether it plays 
from a vinyl LP or from your iPod. King Lear is not 


2012. 
i) one and the same experience when seen at the theatre, 
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COLUMN ALIGNMENT 


Aligning text in justified, centered, or ragged columns reflects the basic 


architecture of typography. Choose an alignment style that suits the structure 
of your website and the character of the individual content elements. Each 
mode of alignment comes with advantages and disadvantages. Centered type 
is graceful and elegant but can appear old-fashioned; in addition, it can be 
difficult to align with other elements. However, centered type can work well 
within the bounded, defined space of a button or menu bar. Justified type will 
have ugly gaps if it’s not hyphenated correctly, and hyphenation can be hard to 
handle online. 
Owing to the flexible, customizable character of web text, designers can’t 
spend endless hours adjusting the rag along the edge of a column or creating 
a justified block with no rivers or holes. Flush-left alignment is therefore 
the most common text setting on the web (whereas justified remains the 
dominant setting for text in print). Flush-left text works well in most extended 
reading environments, especially where columns are quite narrow, as on a 
news site. The ragged edge opens up space between the columns because 
most lines fall short of the full measure, resulting in a more spacious overall 
composition. 


ALIGNMENT Below are the four basic modes of alignment. The first two, left and 
justify, are the most common for long reading. Notice the awkward word spaces 


that occur with justified text in a narrow measure. Right- and center-aligned text 


should be used sparingly and with purpose. 


pf 


3 


In left-aligned text, the 
left edge is hard while the 
right edge is soft. Word 
spaces do not fluctuate, so 
there are never big holes 
inside the lines of text. 
This format respects the 
flow of language rather 
than submitting to the 
law of the box. It creates a 
spacious and organic flow. 


pf 


} 


Justified text has even 
edges on both the left and 
right sides of the column. 
It makes efficient use of 
space and creates a clean, 
compact shape for your 
paragraphs. Ugly gaps can 
occur, however, when the 
line length is too short in 
relation to the size of the 
type used. 


pf 


} 


Right-aligned text follows 
the logic of the more 
familiar left alignment. It’s 
commonly believed that 
text set in this way is 
difficult to read. Its use can 
be quite successful in 
short pieces of text, such 
as captions or pull quotes, 
adding an element of 
motion and surprise toa 
composition. 


pf 


} 


Centered text is 
symmetrical, 
like the facade of a 
classical building. 
Centered lines can be 
broken to emphasize 
a key phrase 
or anew thought. 
Breaking lines in this 
manner is called 
breaking for sense. 


SLEEPAWAY CAMP 


— 


* Beefeater Gin * Campari * Ramazzotti Amaro 
* Creme de Violette + Dash Orange Bitters + Dash Absinthe 


= 


* HOURS & LOCATION * * FIT FOR HUMAN CONSUMPTION * 


OPENING TIMES: 

= mone =| ge \POLLOW |= | 
SAT SIX O'CLOCK % *< 
SUN CLOSED TWITTER 


- 


ADDRESS TELEPHONE © rzew : 
wap 
2624.N, Lincoln Ave. 773.857.0421 : 


Chicago, I 60614 


| nee us on Oo 
iebrsciaiatl 


SIGN UP TO 
RECEIVE UPDATES 


name@address.com SUBMIT 


ALL AT ONCE You will not often find occasion to use all four 
alignment modes in one website, let alone on a single page. 
This designer has created a lavish typographic style by paying 
close attention to the balance of the whole as well as to 
individual elements. Design: We Can't Stop Thinking, 2012, 
http://west.com/. 
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SPACE BETWEEN LINES 


Typically websites are built to scroll vertically; the length of each page varies 
depending on the amount of content on it. Line spacing, also called leading or 
line-height, shapes the look of individual paragraphs and the page’s overall 
style and structure. Designers use looser text to create a relaxed and inviting 
texture; they use tighter spacing to convey a sense of urgency or abundance 
while maximizing available real estate. 

Designers also use vertical spacing to create relationships among heads, 
subheads, block quotes, and paragraphs. Breaks between elements should be 
apparent without leaving ugly and wasteful holes. A well-designed webpage 
should show a balance between white space and denser fields of content. Just 
as with type size, leading should be set as a percentage, not as an absolute 
value. Thus, when users change the type size preference in their browsers, the 
line-height will change, too. 


TYPOGRAPHIC COLOR The interplay between letterforms and the space around 
them creates what designers call the “color” of the text. While the default line 
spacing in print is 120 percent of the cap height, line spacing set at 150 percent or 
more is common on screen. Notice that at 100 percent the block is too crowded, 
while at 200 percent the lines of text drift apart. 


pt pt pf 
line-height: 100% line-height: 150% line-height: 200% 
3 } } 


A typographic hierarchy expresses the 
organization of content, emphasizing 
some elements and subordinating others. 
A visual hierarchy helps readers scan 
atext, knowing where to enter and exit 
and how to pick and choose among 

its offerings. Each level of the hierarchy 
should be signaled by separate cues, 
applied consistently across the website. 
These can be spatial or graphic. Infinite 
variations are possible. 


A typographic hierarchy expresses the 
organization of content, emphasizing 
some elements and subordinating others. 
A visual hierarchy helps readers scan 

a text, knowing where to enter and exit 
and how to pick and choose among 

its offerings. Each level of the hierarchy 
should be signaled by separate cues, 
applied consistently across the website. 
These can be spatial or graphic. Infinite 
variations are possible. 


A typographic hierarchy expresses the 
organization of content, emphasizing 
some elements and subordinating others. 
A visual hierarchy helps readers scan 

a text, knowing where to enter and exit 
and how to pick and choose among 

its offerings. Each level of the hierarchy 
should be signaled by separate cues, 


applied consistently across the website. 


Baselines determine the 
rhythm of a printed page; 
notsoontheweb, 


Print-based typography is dominated by the baseline, an invisible ledge 
upon which the characters sit; in print, line spacing is measured from baseline 
to baseline. Print designers sometimes use a baseline grid to anchor elements 
such as body, heads, and captions along a common rhythm. 

In web design, line-height is created by adding even space above and 
below the cap height. Web designers often select line-heights that have 
elegant mathematical relationships to one another, such as nine, eighteen, and 
twenty-four. Creating a strict baseline grid is daunting enough in print; in web 
design it is even more difficult. Many well-structured webpages have just a few 
strong horizontal hanging points. 


nt 
Headline 24/36px— — 
margin-bottom: 18px; _ 
ee 3 
Subhead text 16/18px ... a 
Transition from head to body Line-height:18px; 
— woe margin-bottom: 18px; 
| 
Paragraph text 12/18px ... _ 
On the web, the paragraph is the basic font-size: 12px; 
hiuldise block or hotwieve Thecnsce. line-height: 18px; 
building block of body text. The space } 


between lines consists of space above SPACE ABOVE AND BELOW In CSS, line-height 


and below lines of text is distributed equally above and below the cap 
: height. Thus a 12px font with 18px line-height 


will have 3px above and below the characters. 


SET IT SOLID Designers create compact, 
FI EAD LI N E S ] N A LL dramatic headlines by minimizing the space 

between lines. Since uppercase letters have 
CAPS CAN B E S ET no descenders, they don’t require as much 

breathing space between lines. It is not 


WITH TIGHTER LI NE uncommon to set all-caps headlines “solid” 


(22px font with 22px line-height). Even 


SPACI NG negative line spacing can be used for 


maximum density. 
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SPACE BETWEEN CHARACTERS 


Designers adjust the spaces between characters through kerning, letter- 
spacing, and word spacing. Kerning deals with individual pairs of glyphs. 
Typeface designers create kerning tables to achieve visually consistent 
spacing between problematic letter pairs, such as Ty and We. Most digital 
fonts have built-in kerning tables, so they shouldn’t need manual kerning. You 
might find exceptions when setting large headers, which magnify poor spacing. 
There is currently no direct kerning property in HTML or CSS, but its effects 
can be replicated by utilizing a neutral inline element such as a span. 

Letter spacing (also called tracking) refers to the space between 
characters in a line or block of text. Designers often open up the letter-spacing 
in strings of caps or small caps, or when using knocked-out text. Conversely, 
text in larger sizes may benefit from negative spacing; as type gets bigger, the 
spaces between letters get larger, too, which can create an overly loose effect. 

Word spacing refers to the blank character generated by the space bar; this 
rarely needs adjusting, but designers may fiddle with it at large sizes or with 
knocked-out text. CSS employs a default word space of .25 em; any additional 
value is added to that base and does not alter the encoded font file. 


LETTER SPACING AND KERNING These two modes of inter-character spacing operate quite 
differently: Letter spacing is global (“well alright”), while kerning is local (“Web Type”). 


h1 { 


WELL ALRIGHT Web Type 


} 


h2 { 


} 


Well alright already 
Well alright already 


WELL ALRIGHT Web Type 


DON’T FEAR 


BASIC HTML & CSS for 


by Jessica Hische 


‘Are you a print designer, photographer, fine-arttt, or general creative 
person? Do you have » shitty website that you slapped together 
yourself in Dresmwesver in thet ONE web design class that you took 
in college? Do you not have » site at al because you've been waiting 
‘two years Fer your cousin to put it together For you? Wel, we're here 
to help. We know that you have litte to na desire to do web design 
professionally, but that doesn't maan that you want an ugly cookie 


te INTERNET 


NON-WEB DESIGNERS 


Russ Maschmeyer 


cutter site or to settle for one that hasn't been updated since Hockers 
was in theaters. Through short tutocal videos, you'l learn how to take 
2 basic wordpress blog and manipulate the css, html (and even some 
php!) to match your aesthetic. Youll feel empowered rather then 
crippled by the internet and worst case scenario youll at least end up 
having 4 better idea of how professional web designers tum your 
Gesign dreams into # reality on screen, 


ABOUT the AUTHORS LINKS ond RESOURCES RSS WALLPAPERS 


DON'T FEAR INTERNET 


+ 


DON'T FEAR SPECIFICITY 


TARGETING CONTENT WITH CLASSE 


DON'T FEAR ™ INTERNET 
prevents 
o 
DON’T FEAR STARTING 
FROM SCRATCH 


DON'T FEAR INTERNET 
r 
. 


DON’T FEAR STARTING 
FROM SCRATCH 


Ne 
DON'T FEAR SPECIFICITY 


TARGETING COMTEMT WITH CLASSES B 105 


Well give you the low-down on Classes and [Ds and hone your 
CSS skills at the same time, 


Categorined on C55, HTML, The Basics 


DON'T FEAR STARTING 
FROM SCRATCH 


PART 2) C38 


Inthe conclusion of this two-part series, wel show you how to 
apply and write your omn CSS. 


Categorized os CSS, The Basics 


Ne 


DON'T FEAR STARTING 
FROM SCRATCH 


PART WO HTML 


In the First video in this two-part series, well take you through 
building» webpage from ceratch by using a good text editor 


tannriand ax HTML. The Ras 


TRACKING CAPITALS 
Spacing out capital letters 
can help them become the 
stoic forms they were meant 
to be. Try opening up the 
letter spacing ona line of 
capitals in head and subhead 
texts. Design: Jessica Hische 
and Russ Maschmeyer, 2012. 


DON’T FEAR TE 


KERNING HEADLINES 
Finesse headline text by 
kerning troublesome pairs. 
The space between A and Y 
improves with negative 
kerning. Design: Josh Brewer, 
2011. Image: Library of 
Congress Prints and 
Photographs Division. 


THAT'S THE ONLY SECRET 


style the letter spacing. 


In order to kern letter pairs in 
HTML, insert a neutral inline 
element, such as a span, and then 
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HIERARCHY 


The plasticity of the web calls for a well-planned hierarchical system. 

Content is often created by multiple users, authors, and editors, making it 
even more important to emphasize key elements through typographic cues 
while subordinating others. Shifts in scale, weight, and color, or the use of a 
complementary font or icon, are ways to express a text’s hierarchy, the ranked 
structure of parts within the whole. Each level should be signaled by one or 
more cues that are applied consistently throughout the site. 

Any visual hierarchy should be built in a way that gives nontraditional users 
equal access. Choose structural elements instead of purely visual ones, using 
tags such as <aside>, <article>, and <caption> that have more semantic 
meaning than the generic <div>, which describes a container without any 
structural relationship to the document. 


‘Abo | Shop | E-Paper| E-Books | Audio | Newsletter| Archiv | Spicle | Blogs | Folostrecken | Video | Schlagzellen ZEITmagazin | ZEITCampus | ZEITGeschichte | ZEITWissen 


ZEIT&&ONLINE suchen 


Partnersuche |mmobilien Automarkt Jobs Reiseangebote 


STARTSEITE POLITIK WIRTSCHAFT MEINUNG GESELLSCHAFT KULTUR WISSEN DIGITAL STUDIUM KARRIERE LEBENSART REISEN AUTO SPORT 


Zuletzt aktualisiert: vor 2 Minuten | Aktuelle Themen: Wahikampf | Islamismus | Fashion Week Anmelden | Registrieren 


MEISTGELESEN 

4. EUROPAPOLITIK Britische Medien zitieren aus Camerons nicht 
gehaltener Rede 

2, GASFELD IN AMENAS Islamistische Geiselnehmer stellen neue 
Bedingungen 

3, DOPINGNTERVIEW Armstrongs Gestindnis ohne Reue 

4, ALGERIEN USA schicken Aufklérungsdrohnen ber Gasfeld 

5. CAPTCHA-SPERRE Google halt Nutzer fir Angreifer und blockiert 
sie 


MEISTKOMMENTIERT 
4, KOLN Katholische Kliniken weisen Missbrauchsopfer ab ® (414) 
2. MALI Dies ist auch Europas Krieg § (232) 
3, BERLIN Unser Hauptstddtle @ (114) 
4. ARD-DEUTSCHLANDTREND Union erreicht besten Umfragewert seit 
sieben Jahren ® (111) 

aaneeeseeaacin: 5. WAHLKAMPF Netanjahu will keine einzige Siediung 

apes . raumen ® (105) 
Islamistische Geiselnehmer stellen neue 
Bedingungen 
Die Dschihadisten haben neue Forderungen veréffentlicht, unter anderem einen ANZEIGE 
Gefangenenaustausch. Der Verbleib von bis zu 60 Geiseln auf dem Gasfeld ist unkKlar. 
[weiter...] @ §& 10 Kommentare 
ALGERIEN USA schicken Aufklarungsdrohnen Uber Gasfeld 


GEISELNAHME Empérung Uber algerische Militaraktion @ 18700,Uhr 
ALGERIEN Viele Geisein und Entfuhrer sterben bei Luftangriff 


Zur Ranglisten-Obersicht 


y+ NIEDERSACHSEN 
Das grofe Zittern der kleinen Parteien 


HEADLINE NEWS The complex content of this news site is 
organized through weight, size, and color; it is framed with 
white space to allow pause and breathing room. Design: 
Information Architects, 2009. 


( 4 body { 


aa==D> 
font:125%/140% “Apercu Regular”, sans-serif; 
movement within its lifespan. font-style:normal; 

Viewing memes all together or ina 
sequence will show patterns more 
clearly. | feel it important to pay padding :lem; 
attention to patterns of thinking } 

such as these. Designers need to 
be concerned with how culture is 
made and transferred, it’s the AL { 
business we’re in. 


font-weight:normal; 


font-size:150%; 
line-height:140%; 


‘In the vast Library there are no 7 Say ,eu ” ic. 
two identical books. The Litrsey font a Fortescue Regular”, serif; 
is total and its shelves register all text-align:center; 
the possible combinations of the } 
twenty-odd orthographical 
symbols: in other words, all that it 
is given to express, in all blockquote { 
LAGE EIS font-family:"Fortescue Regular”, serif; 
minutely detailed history of the : 
future, the archangels’ font-size:100%; 
autobiographies, the faithful margin:lem O O lem; 
catalogues of the Library ... the 
story of your death, the i 


lation of every book in all 
languages, the interpolation o 
book in all books ... Wh 


= 


Pub 
lish 


Writing ing Projects 


stuff 


Welcome 


Reading is distracting. It is paying 
attention, searching, and 
collecting. Reading is plastic, 
creative work that is affected by 
methods of publishing and the 
devices we use. People read more, 
and more often. Typography and, 
by extension, graphic design gave 
rise reading public more vast 
the preceding manuscript 
ulture allowed or cared for. Sol 
approach reading by way of 


HIERARCHY This system is based on just 
a few purposeful shifts. The designer uses 


graphic design. 
Because of my interest in two complementary typefaces, indents, 
Se es and size changes to create a bookish layout 


for comfortable reading. Design: Young Sun 
J Compton, 2012. 
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TYPOGRAPHIC HTML TAGS 


After establishing an overall typographic system (typeface, grid, column 
width, vertical and horizontal spacing), designers use simple HTML tags 

to style text inline—marking differences inside a larger element such as a 
paragraph. These tags fall into two types: physical and logical. Physical tags 
simply tell the browser to make changes in the display of text, such as bold, 
italic, or underline. Logical tags may display similarly, but they are used to 
impart meaning to the text they enclose. Using the <em> tag to italicize text 
(for emphasis) rather than the physical <i> tag (for style) will communicate 
a semantic difference that can be read by text-only, text-to-speech, or Braille 
output devices. Logical tags greatly improve the accessibility of a website, 
extending the reach of your content. 


eco 
Es z ss Seta a re : 
JANE 
SMITH 
Some Things I’ve Done So Far 
WORK 
ABOUT 
CONTACT AvasssaveverssnecsavesmanesiensacanenamssnsmonnesssssssetesasesusaveseresessencenananeeseneneaniaeRAGueRNsIAiGsAseISOELeseseIAseserssenenGnEnnASAEGSINSENIANEROLSNAIAUESIASEIOFSINILAsOLSSMaNNCRRNSNSNMARIESRSRCONENAMNSSIALALsIAsusaseresetesasssemesnnnneR emeMnenonemennnsesaretesesents 
LINKS Studies 
2010 - 2012 MFA in Graphic Design / Maryland Insvivuve College of art 
2006 Exchange Studies / Kéln International School of Design 
2003 - 2007 B.Design / Nolon Institute of Technology 
Teaching Experience 


2010 - 2011 Maryland Institute College of Art / Graphic Design Introductery Workshop 
2007 - 2010 Holon Institute of Technology / Design Foundation 
2006 - 2010 Holon Institute of Technology / Portfolic Course 
Professional Experience 
2008 - 2010 Freelance Graphic Designer 


Graphic packaging of exhibivions / Selected Clients Lise: 


Igudan (the Dan Region Association of Towns for Sewage) / 
Salvation through the Gutter 
READ MORE >> Stefan Mischook, “Logical vs. Dollingez Gallery. Inga Gallezy and Minshar Gallery, Tel-aviv / My Camp 
; . > Israel Musuem, Jerusalem (Anna Ticho House) / Ualie Export, Wice vo Meet 
Inline Tags,” KillerSites, accessed July 11, 2013. Dellinger Gallery, Tel-aviy / Igal Shem-Tov, SixtOne 
http://www.killersites.com/articles/articles_ 


logicalvsInlinetags.htm. Exhibition catalogues and artists’ books / Selected Clients List: 


Eilon Armon, Megalomania, Tel-Aviv Artise‘’s House 

Michal Shamiz, Assif, Hersliya Museum of Contemporary Art 

Graduate Exhibitions Catalogues (2007-2010), Sapir Art College, Sderot 
Igal Shem-Tov, SixtOne, Dollinger Art Project, Tel Aviv 

Liav Mizrahi, Spinario, Inga Gallery of Convemporary Art, Tel-aviv 


LOGICAL/SEMANTIC TAGS By using logical tags you are communicating to 
the browser that the text has special meaning. Search engines use these 
tags to analyze content. Tags compiled by Aviv Lichter. 


aHISTit eR gh287 
anBSTit1¢RABS RRAST 
BHSSTit1eR/S BREST 


Kem>Emphasized 


iciegmas 11 Title h2Title 
iclesynas [13 Title 4 Title 
itles7h6> h5Title heTitle 
texts/em> Emphasized text 


This text is Scite>citeds/eite> This text is cited 
Estrongsstrong text&/Strong> Strong text 
| <d£n=Definition terms/d£n> Definition term 
This is SSUp>superscripts/SUp> text This is Superscript text 
This is BSUBSsubscriptS7SUB> text This is cusscript text 
EssThis text is no longer corrects/S* Thistextisnetongercorrect 
This is §dél>wrongs/del>. This is wrens. 


RainssThis iss/iAs> the cor 


rect text This is the correct text 


This S@stexts/q> is a quote This “text” isa quote 


PHYSICAL/PRESENTATIONAL TAGS Physical tags provide specific rendering 
instructions. These tags tell your browser to display text a certain way. 


8b3Bold 


text &/B3 Bold Text 


BbigsBig texts/big> Big Text 


BBitalic 


textes Italic text 
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SPECIAL CHARACTERS 


A refined typographic system consists of more than a well-chosen palette 
of fonts and reader-friendly structural cues. Many professionally designed 
typefaces include glyphs that add nuance and refinement to the presentation 
of text. Browsers are increasingly able to support expanded features that for 
centuries have been markers of fine typography in print. Small caps, whose 
height matches the body of the lowercase x, look elegant and discreet within 
a paragraph of text; they are drawn with squarish proportions and a meaty line 
stroke, which makes them attractive for use as heads, subheads, bylines, and 
more. Old-style or nonlining numerals have ascenders and descenders, just 
like lowercase letters; they have a modest visual footprint within a body of text, 
whereas conventional lining numerals (which have the height of capitals) can 
sometimes tower over their surroundings. Elements such as small caps and 
old-style numerals as well as kerning pairs, ligatures, and alternate characters, 
when used properly, separate the typographer from the typist. 

The OpenType font format packs all of these desirable features into a single 
font file. OpenType fonts often have the suffix Pro (Adobe Garamond Pro) 
or the prefix or suffix OT or OTF (Tisa OT). Access to these elements has been 
limited for web designers until recently. Now the CSS font variant or font- 
feature-settings properties allow designers to make use of the full range of 
features available with an OpenType font and style their text as carefully on the 
web as in print. 


KERNING PAIRS AND LIGATURES Some modern browsers SMALL CAPS AND OLD-STYLE NUMERALS 
handle kerning pairs and ligatures by using the text-rendering Using the font variant property allows designers 
declaration. NOTE: Applying this to large blocks of text can to enrich web type with small caps and old-style 
extend load times on slower devices. numerals. 


first floor small CAPS 


first floor 123 456 


AMPERSAND 


THE WEB TYPOGRAPHY 
CONFERENCE 


iSTH JUNE 2012, BRIGHTON UK 


= 


| £125 er 


FINE TYPOGRAPHIC DETAILS Small caps, old- 


HOME SCHEDULE LOCATION 


Elliot. Jay Stocks. 
Veronika: Burian 
Laurence, Penney __. 


Follow Ampersand on Twitter @ampersan 
attending on the social conference directory Lanyrd. 


COMBINING THE WORLDS OF 
WEB & T’'YPE DESIGN. 


‘a CSS 


dconf ¢ampconf & track who's 


style numerals, and ligatures are no longer the 
exclusive domain of print design. Design: Elliot 
Jay Stocks, 2012. Headline typeface: Magneta, 
designed by Neil Summerour, 2009. 


Tomorrow’s web type 
today: lee qeiete if 
subsets 


123 


These sMALL CAPs are 
starving! 


PSEUDO SMALL CAPS True small caps 
have the same stroke weight as the 
upper- and lowercase characters around 


AN EVOLVING STANDARD CSS3 includes two new properties 
that give designers access to the full range of typographic 
detail available in OpenType fonts. The text above flaunts the 
bravado of the typographic swash, as seen in the letterforms 
at the end of each word in “Jason Smith” and “José Scaglione.” 
Such alternate characters can now be used in web text with 
the help of the font-feature-settings CSS property. Design: 
Elliot Jay Stocks, 2012. 


COMMON OPENTYPE FEATURES Below are some OpenType 
features and their font-feature-settings values: 


Common ligatures “liga” 
Discretionary ligatures “dlig” 
Small caps “smcp” 
Lining numerals “Tnum" 
Old-style numerals “onum" 


READ MORE >> The World Wide Web Consortium, “CSS Fonts 
Module Level 3,” W3C, http://dev.w3.org/csswg/css-fonts/. 


them. Software creates pseudo small 

caps by shrinking down normal caps to the 
approximate x-height; the resulting letters 
look starved and sickly because their 
weights don’t match that of their brethren. 


affluent acting 


font-feature-settings: normal; 


affluent acting 


Pours re cor os BBM ene 
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SPECIAL CHARACTERS 


For the typographic purist, HTML is a dangerous breeding ground of 
debauchery. This handy guide will help you keep your on-screen typographics 
up to snuff with the proper use of apostrophes, quotation marks, and dashes. 
Such characters are telltale signs of a well-considered composition, whether 
on screen or in print. Use these HTML entities or their Unicode equivalents in 
place of the offending characters in your HTML source code. 


APOSTROPHES signal contraction or possession. To use the 
proper “curly” ones on a webpage, you need to insert the Unicode 
character @ #8277; in place of the apostrophe. 


Its a dog's life. 


<p>ItG#8217)s a dog&#8217)s life</p> 


DASHES OR HYPHENS? Em dashes (—), en dashes (—), and flow of the sentence. En dashes connect two numbers as a 
hyphens (-) each serve to connect or separate elements in range of information. Hyphens connect words or elements 
different circumstances. Em dashes express a break in the (run-of-the-mill). 


Em Dash—A Love Affair 


<p>Em Dash&mdash}A Love Affair</p> 


En Dash, aged 5-10 years 


<p>En Dash, aged 5@ndash}10 years</p> 


HTML CHARACTER ENTITIES Use character entities to 
implement reserved characters or glyphs that cannot be 
entered with the keyboard. For example, the greater/less 
than signs cannot be used in text because they would be 
mistaken for markup. 


Slt; E less than &H#8217; * apostrophe 


&gt; 5 greater than &lsquo; | left single quote 
&nbsp; | nonbreaking space &rsquo; ‘right single quote 


&t8209; = nonbreaking hyphen &ldquo; * left double quote 


fndash; = endash = Srdquo; right double quote 
fdeg; degree CULL Elle 
ésect; BG sectionmark = Shellip; = ellipsis 


SH174; © registered copyright S&iecx1; i inverted exclamation 


SH8482; ™ trademark 


&sup1; 1 superscript 


&euro; € euro &sup2; ? superscript 


StH162; € cent &sup3; 3 superscript 


&para; 4 pilcrow Sordm; ® masculine ordinal 


&dagger; ¥ dagger Sordf; 2 feminine ordinal 


&Dagger; | double dagger &fracl4; Ys quarter fraction 


68194; | en space Sfracl2; Ya half fraction 


&#8195; ‘em space Sfrac34; 3 three-quarters fraction 


&H8199; ! figure space &times; multiplication 


&#8200; ] punctuation space &H8722; : subtraction 


&#8201; | thin Space &plusmn; © plus-or-minus 


StH8202 ; | hair space &not; 5 negation 
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IN THE CLASSROOM: THE HTML POSTER 
WITH KRISTIAN BJ@RNARD 


A traditional print poster aims to attract the eye and promote a product, service, 
or event. Webpages can operate in the same way. Often the home page of 

a start-up or new institution functions as a digital poster that links users to 
other content. The designer Kristian Bjornard asked the students in his Motion 
Typography course at MICA to design a poster using only HTML, CSS, and 
some JavaScript as needed. Students used the @font-face rule to bring in 
typefaces and built all graphic elements entirely with CSS3 transformations. 
Some students chose to make homages to design history, re-creating 
renowned compositions from the history of print within the constrained canvas 
of the web. They also sought to incorporate motion and interactivity into their 
digital posters. Bjornard’s project helps designers become more comfortable 
with the process of turning static designs created in Photoshop or Illustrator 
into code or to construct compositions solely in the browser, with no assistance 
from design software. 


pecause 
social 
change 


has tobe 
social. 


o exert authority upon unbecoming modesty of the unsuspecting muscle 


a deliberate intention 


s T R u c K 


Kern and Burn: Conversations With Desig 


back and side profile. We get updates on the sculpt and 
from there. Honestly, Super7’s sculptors are so good, wé 
knock it out of the park each time. 


Are you interested in creating design products 
toys provide a secondary income? 
Absolutely. Personal projects allow us to experin 
client work. It’s cyclical in that way, and we val 
posters, prints and toys usually goes right bac 
That’s just part of the fun. 


The Sasquatch festival posters and to 
partnership with Live Nation came to 
Thanks! The partnership is actually wi 

He’s a good friend and tends to place 
We're very thankful for our relation 
each year. We had talked about er 
collector, throughout the years. § 

We started working on charactt 
for toy production. 


What is the biggest risk? 
favorite failure? 

I think the biggest risk 
heels of a successful 01 
our faces? When we f 
hungry and ready t 
if the company fail 


YOUNG SUN COMPTON Digital publishing has transformed readers into users who interact 
with content, responding to it in nonlinear, sometimes unsanctioned 
ways. Reading has never been a singular experience. It can be fast 
or slow, focused or distracted, public or private, print or digital. 
Today’s readers seek control over not just what they read, but how, 
when, where, and in what medium. 

The future of books is social. Designer Craig Mod, a leading 
commentator on digital reading, has described how books have 
changed from being fixed objects to open systems. Networked tools 
allow consumers to rate, review, and annotate texts and to search 
across diverse bodies of material. Today’s emerging platforms allow 
writers to communicate with readers throughout the publishing 
process. Once a book is released, readers continue to influence its 
shape and content through sharing, excerpting, highlighting, and 
searching. Blogs are becoming books, and readers are “unlocking” 
authored texts by archiving and rearranging digital content. 

Of course, books have always been unstable. The medieval 
monks created one-of-a-kind “copies” that were riddled with errors. 
Gutenberg’s typographic revolution sought to manufacture the 
uniform, mass-produced text, yet even after the rise of the modern 
publishing industry, the book remained a fluid thing. Designer Ben 
Fry’s project The Complete Work of Charles Darwin Online visualizes 
the many changes made to The Origin of Species during Darwin’s 
lifetime; by comparing the gaps and additions from one text to 
another, Fry revealed, for example, that the infamous phrase 
“survival of the fittest” didn’t appear until the fifth edition. 

The mutable book—and its restless, rapacious reader—is here to 
stay. Designers of digital texts draw on many areas of expertise, 
from page layout, typography, and user experience to product 
design and software engineering, to create books that respond in 
different ways to the demands of new platforms and new desires. 


CONVERSATIONS WITH DESIGN ENTREPRENEURS Designers READ MORE >> Craig Mod, “Post-Artifact Books & Publishing,” June 
Jessica Karle Heltzel and Tim Hoover released their book Kern 2011, http://craigmod.com/journal/post_artifact/. Ben Fry, “On 
and Burn, which grew from writing online, as a PDF, EPUB, and the Origin of Species: The Preservation of Favoured Traces,” 2009, 


MOBI in addition to the printed version. http://benfry.com/traces/. 
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LINEAR READING 


An ePub is a standard format for representing and encoding digital content in 
a single packaged file that can be distributed and sold electronically. Although 
the popularity of ePubs is tied to the growing use of iPads, Kindles, and other 
devices, ePubs can be read with numerous reader apps created for desktops 
and mobile phones. In addition to ePubs, digital publications can take the form 
of Webpages (viewable in any web browser), PDFS (viewable with Adobe’s free 
Acrobat Reader software), and custom apps enriched with multimedia content 
(viewable on compatible tablets). 

The linear structure of a basic ePub works well with long-form texts, such 
as fiction and in-depth journalism. Although digital bookmarks allow users, 
in principle, to jump back and forth through the content, the ePub medium 
overwhelmingly favors reading in a straight path from beginning to end. In 
most ePubs, the linear content is designed to reflow in response to the user’s 
screen format and font size preference, giving the designer little control over 
layout. Some ePubs are fixed-format, allowing designers to construct tighter 
relationships between text, figures, images, captions, and other elements. 


THE NEW NORMAL The increasingly familiar shapes of 
e-readers and smartphones helped usher in a renaissance 

of reading. While developers strive for standards in serving 
content to many different devices, publishers struggle with the 
digital rights management and how to interface with libraries 
and resale markets. 


READ MORE >> On the ePub format, see International Digital 
Publishing Forum, “EPub 3 Overview,” IDPF, October 2011, 
accessed August 25, 2013, http://www.idpf.org/epub/30/spec/ 
epub30-overview.html. 


Ben Pieratt 


Take Greater Opportunities 


Ben Pieratt has @ passion for devouring the web. He experiments 
with, tears down and builds up new business models, and his 
Passion for contributing to the web community is as vibrant as 
ever. He is the cofounder of Supply, a new kind of online retail 
platform that curates products. He collaborates with companies 
such as Fictive Kin to shape the identity and product design of such 
applications as Rushmore and Done Not Done. 

His transparent, inspirational writing has moved many 
designers, including ourselves, to realize the greater opportunities 
available to them and take the first step toward pursuing their 
passions. 


What is your background, and how did you come to design? 
I grew up in Brazil and moved back to the U.S. during my senior year 
of high school. It wasn’t a great year, and I spent a lot of it locked 
away in my bedroom, messing around with Photoshop and devouring 
the web on the Graphite iMac that my parents bought for me. I loved 
that thing. I took my senior portrait with it. 1 visited one of my 


Ne 
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Ben Pieratt 


Take Greater Opportunities 


Ben Pieratt has a passion for devouring the web. He 
experiments with, tears down and builds up new business 
models, and his passion for contributing to the web 
community is as vibrant as ever. He is the cofounder of 
Supply, a new kind of online retail platform that curates 
products. He collaborates with companies such as Fictive 
Kin to shape the identity and product design of such 
applications as Rushmore and Done Not Done. 

His transparent, inspirational writing has moved many 
designers, including ourselves, to realize the greater 
opportunities available to them and take the first step 
toward pursuing their passions. 


What is your background, and how did you come to 
design? 

I grew up in Brazil and moved back to the U.S. during 
my senior year of high school. It wasn’t a great year, 
and I spent a lot of it locked away in my bedroom, 
messing around with Photoshop and devouring the 
web on the Graphite iMac that my parents bought for 
me. I loved that thing. I took my senior portrait with it. 


Loc 167 4% 


/ 


TAKE IT WITH YOU As physical devices, Kindles and iPads further promote 
linear reading experiences by focusing the user's attention within the 
framework of a single application. In contrast, the multiple windows of 
the desktop environment encourage users to switch more frequently 
among activities. Here the book Kern and Burn: Conversations with Design 
Entrepreneurs is displayed on an iPad and Kindle Paperwhite. Design: Tim 


Hoover and Jessica Karle Heltzel, 2013. 


Ow & 


PLAYBOOKS 


READMILL 


IBOOKS KINDLE NOOK 


LIBRARY APPS Our libraries may have 
dwindled in the physical world, but not in 
the digital realm. Now books and magazines 
are neatly formatted to numerous devices 
and applications. Endless content is a press 
and swipe away, and these applications are 
inspiring more people than ever to read. 
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SELECTIVE READING 


Not all reading experiences are linear. Google Books presents a wholly 
different landscape from a Kindle or other ePub-based device. In place of 
isolated, tightly framed pages of text, the Google Books interface surrounds 
its content with links to sellers, libraries, and reviews. Scanned from millions of 
printed volumes, Google’s digital books retain the typographic texture and 
page layout of the physical works. But unlike printed volumes, these digitized 
books are fully searchable, providing scholars with a powerful research tool. 
Google Books supports an active, acquisitive, goal-oriented mode of reading, 
well suited to Google’s focus on search as the founding core of its business. 

The process of reading—whether goal-oriented or recreational—involves 
more than the simple act of curling up with a book and absorbing its contents 
page by page. First you need to choose what you want to read and what you 
will ignore. Later—sometimes much later—you plunge into the act of reading 
proper, perhaps broadcasting your impressions as you go and skipping in and 
out of the text at will. Finally, you decide how to keep track of what you’ve read, 
saving the useful bits and flushing away the rest. From print to e-books to 
read-later apps, different media support the process of reading in different 
ways. Some tools, from Kindle’s Public Notes feature to Jonathan Puckey’s 
experimental The Quick Brown project, emphasize the fact that text changes 
and mutates in the hands of readers, writers, and editors. 


Relationale 
Texte 


LINES, NOT LINEARITY 

To follow a thought doesn't 
necessarily require reading 
from beginning to end. 

Lines, a browser-based 
reading app, inverts the 
conventional hierarchy of the 
blog, list, or forum by putting 
readers’ comments at the 
center of the action. Design: 
Astrom/Zimmer, 2011. 


Google Aldus Manutius hea) 


Books 2 Q 2 BD 3 X ce pddiomyiiomry —_ Whe review Pogere= <> o- 
ccarllaaiaaeniiaenaiil 218 Printers’ Marks. Marks in Italy and Spain. 219 
x The Aldine family come at the head of the of man to the tool of iron: use it well, it shines, 
| Venetian printers, not only in the extreme beauty cease to use it and it rusts." It was not until 
j owe of their typographical work, but also in the matter 1502 that Aldus adopted a Mark, the well-known 
| — of Marks. ‘The first (and eg production of anchor, and this appears for the first time in “ Le 
Sicicedl vache the founder of the dynasty, Terze Rime di Dante” (1502), which, being a 
fecbyad paiclovand 1494-1515, was “ Musa:i Opusculum de Herone & duodecimo, is the first edition of Dante in portable 
phic! Leandro,” 1494, 2 small quarto, and his life's work form, This Mark, and one or two others with 
‘hidus Manutios me as a printer is seen in about 126 editions which very slight alterations which naturally occurred in 
the process of being re-engraved, was used up to 
About this book 
» My library 
» My History 
Books on Google Play 


Terms of Service 
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THE, FIRST ALDINE ANCHOR. 


are known to have been issued by him. “I have 
made a vow,” writes in his preface to the 
“ Greek Grammar” of Lascaris, “to devote my life 
to the public service, and God is my witness that 
such is my most ardent desire. To a life of ease 
and quiet I have preferred one of restless labour. 
Man is not born for pleasure, which is unworthy 
of the truly generous mind, but for honourable 
labour. Let us leave to the vile herd the exis- 
tence of the brutes, Cato has compared the life 


ANDREA TORRESANO. 


the year 1546. In 1515 the original Aldus died, 
and as his son Paolo or Paulus was only three 
years of age, Andrea Torresano, a distinguished 
printer of Asola, into whose possession the * plant” 
of Jenson had passed in 1481, and whose daughter 
married the first Aldus, carried on the business of 
his deceased son-in-law, the imprint running, “ In 
wdibus Aldi et Andrea: Asulani soceri.” In 1540 
Paulus Manutius took over the entire charge of 
the business founded by his father. The Anchor, 


GOOGLE BOOKS Millions of printed works 
are searchable via Google Books. Here a user Everything's In Play fren: 2 jee nom 
looking for the term “Aldus Manutius” has swtwtes Hy 
located a book that was first published in 1893. Se a eomeieran 
Top 20 shortest 
Google's scan preserves the book's original Surprise jo) Edwards Is the Daddy an 
yi What? 
typography and layout while making the text sit = 0 etnaas = ae i ick a ale ri cia woarcacls tees 
‘in Fox News headlines. 
searchable. Pelosi Doesn't Have the Votes Today; 
Pelosi Dosn't Nave the Votes Legend 
. . Haiti's Mass Graves Swell Hal's Mans Graves Swell ar rapa 
THE QUICK BROWN This experimental Court Strikes Down Limits 
—_ {edwards Admits Paternity of Love. Fie th teri 
news aggregator gathered links to Fox News Muslims Angry Over US. Jesus’. “Text tat has been removed, 
articles and used typography to note changes speecareactinbs: Black inverted: 
over time in the headline copy. Rather than Sco eae snes 
presenting the news as a fixed and objective iui casianeses as 
+ 14:25 - 1 hour S4 minutes ~ 16:19 by ceded att tees 
medium, The Quick Brown represented Stage Set for Jackson Spectacular dessins 
H ‘Path of Destruction ines 
journalism as a process of ongoing change. Pelosi Doesn't Have the Oficial at Tera Ranch 
i i Votes Final Hours in Pa. Light grey 
Design: Jonathan Puckey, Moniker, 2007, Fy — taba aoe ie ne ‘Abveadline that stayed the same, 
i per erre (dar side br rae Israeli Forces Mass at Gaza. 
http://thequickbrown.com. BE ow in severe toa pressiernerlarg Statistics 
ing scrapped Italy Hit With ‘Significant’... ‘Stories; 11583 
Georgia, Russia Swap Prisoners: ‘Total amount of edits: 16490 
U.S.: Draft Cease-Fire 'One-Sided’.. Running for: 814 days 
Israel, Hamas Set to Talie 
COC Awaits N.Y. Flu Tests Jonathan Puckey 
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THE FLOW OF CONTENT 


Different modes of publishing afford different modes of reading. Linear, 
selective, consultative, or informative reading each thrive best within certain 
kinds of systems. A novel reads better within the linear flow of a Kindle app 
than in the busy framework of a web browser. Conversely, an in-depth news 
report relies on supporting articles and media to fill out its narrative. Slides 
work well for presentations and children’s books because they usher the 


audience gently forward through a 


story. 


By organizing the flow of reading, the designer can push users toward 
active searching, passive receiving, or spontaneous wandering. Designers 
understand that layout and structure play a role in how one reads; for readers 
the effect may be more subconscious. Shown here are various models for 
structuring the flow of content in different digital media. 


“You had my note?” he asked with a deep 
harsh voice and a strongly marked German 
accent. “I told you that I would call." He looked 
from one to the other of us, as if uncertain 
which to address. 

“Pray take a seat,” said Holmes. “This is my 
friend and colleague, Dr. Watson, who is 
occasionally good enough to help me in my 
cases. Whom have I the honour to address?" 

Loc 196 4% 


READ MORE >> Gerard Unger, While You're Reading 
(New York: Mark Batty Publisher, 2007). 


PAGES Static digital pages, like those in a PDF or a fixed-layout 
ePub, provide an obvious analogue to the printed page. The 
hard frame of a Kindle or other reading device keeps readers 
immersed. A status bar showing the percentage of the book 
already read can help orient readers within the whole. 


WIM CROUWEL CATALOGUE 1 


DPS Adobe's Digital Publishing 

Suite enables speedy production of 
applications for mobile and tablet 
devices. The resulting content is 
available as a downloadable app, either 
as a single unit or in a newsstand of 
sorts that allows publishers to release 
multiple issues over time. Individual 
apps can be as rich as a webpage and 
don’t have to adhere to a standard 
template or look. A diversity of 
interesting applications is being created 
today with DPS. As Adobe continues to 
evolve the DPS tools and more stunning 
examples appear in app stores, the 
technology could gain real traction with 
designers and publishers. 


BOOKS AS APPS In order to gain more 
control of the look and layout of their digital 
publications, designers can create books as 
stand-alone applications instead of ePubs. In 
this example, readers reach the next chapter 
or article by swiping side to side; swiping 
vertically reveals distinct pages within that 
stack. Design: Elena Carl, Unit Editions, 2012. 
Design assistant: Liam Hine. 


bad 


rbd 


rbd 


>< 


>< 


>< 


>< 


>< 


LAUNDRY LINE Picture a series of texts 
hanging next to each other from acommon 
line. That’s how a DPS publication is 
structured. Users can navigate up and down 
in long scrolls or side to side to move between 
documents. 
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THE FLOW OF CONTENT 


N33uIS NO 4dAL \\ 98 


nye 2013 In the fall of 2001, 
—————_——_——— after the historic calamities of 9/11, just 
RELATED COVERAGE over 785,000 people voted in the 1] 
Leading Demoerats,de Blasio Democratic primary, which marked a 
Neve upatne zona)" robust showing, particularly since 
voting had been put off two weeks 
— remeretaninepe because of the terrorist attack. If 
— similar numbers are achieved in this 
= year’s primary, on Sept. 10 — and that 7 
= is hardly assured — then one-sixth of 
ar the city’s electorate and a tenth of its 
ictheaabarnepesnsnd population could in effect be choosing 
emamaie Voters on the our next mayor, 
Who constitutes our class of decision 
enucation makers? History is by no means ———_— 
charter sonols \ predictive, but voting patterns in the El 
cxaen schoos city are at once not altogether 
tots surprising and defiant of certain 
K Ineractive Feature assumptions. In New York, as in most 
Where the Mayoral Candidates parts of the country, presidential 
Stand on Bay lannen elections draw more voters than local 
ones. The ethos that compels us to buy 
SS bacon cured from the meat of pigs 


SPINE A common way of organizing online journalism is to group 
articles along a central spine. For example, this is how the New 
York Times organizes multimedia-supported articles. Side boxes 


mesweeneys.net 


2020: All Books Will Be Cross-Platform 
and Interactive. 


Future “books” will be bundled with 
soundtracks, musical leitmotifs, 3-D graphics, 
and streaming video. They’ll be enhanced 
with social bookmarking, online dating, and 
alerts from geo-networking apps whenever 
someone in your locality purchases the same 
book as you— anything so you don’t have to 
actually read the thing. Authors will do their 
own marketing, the reader will be responsible 
for distribution, the wisdom of crowds will 
take care of the editing, and the invisible hand 
of the market will perform the actual writing 
(if any). Writers will respond either by going 
viral or by going feral. 


might include a slideshow, video, or infographic. 


SCROLL The scroll is an ancient 


au» form of the book, preceding 
the bound codex by thousands 
of years. It is also the basic 
form of an HTML page. Asa 
the-future-of-books 


physical object, the scroll is 

the embodiment of linearity. 
Traditional scrolls, such as the 
Torah, are horizontal, but digital 
scrolls are typically vertical. The 
app Instapaper will turn multipage 
articles into a single scrolling 

page of text, making them easy to 
navigate. 


GRID A grid can be used to group elements 
in an equal but unconnected way. The 
social networks Flipboard and Pinterest are 
prominent examples. 


Pinterest a’ 


‘Search resuits for ‘bookcshett pom’ 


SLIDES A slideshow is like a movie: One neatly 
composed frame comes after another. The 
sequence is linear, but the content is organized 
into uniformly sized chunks. A great example 
is Christoph Niemann’s interactive picture 
book Petting Zoo (2013). 


ONIHSITENd TVLIDIC \\ 28 


N3duYIS NO AdAL \\ 88 


ORBITAL CONTENT 


On the web, “readers” include not only human beings but also a host of digital 
devices and software applications. Numerous products seek to gather, filter, 
and file content for people and their machines. Bombarded with endless 
information, many users collect texts to consume at a future time. Popular 
aspire to a serene and bookish sensibility, using traditional 
typography to liberate content from the context in which it was published 
and instill a readerly state of mind. Minimal navigation, quiet branding, and 
generously scaled text help clear away the commercial clutter that surrounds 
the typical online reading experience. 
News aggregators allow users to access content from diverse sources. 
Some aggregators, such as Drudge Report and Huffington Post, employ 
strong visual identities in order to present themselves as unique, editorially 
driven publications, while others, such as Google News and Reddit, use 
minimally formatted typography to embrace the aesthetics of automation. 
Designer Cameron Koczon has called these emerging modes of user- 
controlled reading experience Orbital content. Instead of spending time 
reading text on different sites, readers hunt down the content they want and 
drag it back to their own personal domain, building collections of reading 
material with a self-made editorial through-line. Users can choose to access 
their orbital content via web browser, mobile device, or print-friendly PDF. 


Ueltonater 


UVING ROOMS = july 12, 20 


How to Lose a 


By ELLEN LUPTON 


future of domestic life 


TAGS. 
HEIRLOOMS. HOME, 


7 173 Comments 


Legacy 


An “heirloom” is an object steeped in family history, handed down 
from generation to generation: your mother’s wedding dress, your 
grandma's espresso cups, your great uncle's underwear. You can't 
buy an heirloom at Pottery Barn or Ikea. It comes via gift, bequest or 
a heated sibling brawl, But who's to say you actually want this stale 
old stuff? 


HOPELESS 
CHEST 


The desire to pass objects on to one’s offspring {s part of our longing 
for immortality. Even folks in the “die broke” crowd, determined to 
enjoy their remaining assets rather than leave them to the ungrateful 


A house is more then just a shelter from the storm. 
How we shape our homes, and how we behave within 
there, speak volurnes about our history, our values 
and our way of life. Living Roams explares the past, 
present and future of domestic Ife, with contributions 
Srom artists, journalists, design experts and 
historians. 


INSIDE OPINIONATOR 
August 31, 2013 
Ca: 
Twas allegedly a novelist, a 
| THE GREAT crime writer, no less, bat f 
OrviDE couldn't make stuff up. 
MEASURE Don't Ask What I'm 
Writing 
DISUNION Want to lose a friend who's 
a writer? Ask ber, a month 
Tait in, how it's going. 
Zz EGAN 
Mone From Oraft » 
CONTRIBUTORS of 


READ MORE >> Cameron 
Koczon, “Orbital Content,” 

A List Apart, no. 326, April 19, 
2011, http://alistapart.com/ 
article/orbital-content. 


READING IS DISTRACTING 
It becomes hard to read 

an article when you are 
constantly being prompted 
to share it orclick away toa 
related article or post. These 
enticing features might 
keep a user on asite, but 
they don’t help the reading 
process. 


>» aD 
TE 3 F 
Readability 
READING LIST aa ae : sas 
* Building Dwelling Thinking 
3% SUFAVORITES 
They Keep Using That Word 
G Archives 
oO rx 
Mi TOP READS The Whitney Identity 


Responding to W(hat)? 


f  LONGForM Picks 


ce) 


BROWSER 


The Flattening of Design 


5° 3 SETTINGS t might sound a ee 


\ a 


READ LATER Readability and similar apps give readers a choice 


It might sound audacious to tk 


Microsoft, the arbiter of uncool 


the forefront of design a few years ag 


It turns out the company’s decision to 
focus on “flat d "atyt visual 
scheme where everything has 

and even 1 few ye 

the rest of the technology and 


nterface industry 


While Microsoft was flattenin; 
interf s if it were a child pus 


down on a bulge of putty 


of when, where, and how they read. Content is pulled from its 


original source, styles are removed, and text is ordered much 
like an ePub with no-nonsense linearity. All content surrounding 
the main text is wiped away, and users are able to customize 
the styling, just like with an ePub. Design: Teehan+Lax for 
Readability, 2012. 
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‘CASE STUDY. 
WORKS THAT WORK 


The magazine Works That Work, whose main focus is “engaging storytelling,” 
is truly a multiplatform publication. Page one of the inaugural issue contained 
a message from editor Peter Bil’ak, in which he explains, “We are not bound to 
traditional publishing technologies and offer you our stories in a form that 
suits you, whether you want to read us on paper, tablet, or phone.” Readers 
can purchase a hard copy or a suite of digital files (PDF, ePub, Mobi, or HTML, 
depending on their preferences). 

The creators of Works That Work have considered the user’s experience 
across multiple platforms, creating layouts that exploit the available space and 
dynamic flow embodied by each publishing method. Decisions about fonts, 
formats, margins, navigation, and interaction affect the user’s sense of plea- 
sure, agency, and control. 


HTML 


Works That Work, No.1. \ Dutch Design 


Peter Bit 


An innovative project strengthens the Netherlands’ 
seacoast while creating new recreational areas and a 
stable ecosystem. 


The Netherlands is not only one of the most densely populated countries in the world, 
but because of its unique geography (half of its surface lies below sea level). it is also 
very vulnerable ta tlooding. 


A popular saving goes that God may have created the world, but the Netherlands was 
created by the Dutch. As proof, the Dutch can point toan entire province which 
consists entirely of land reclaimed from the sea, and a complex system of drain- 
ditches, dams, barriers, canals and pumping stations that keeps the country dry, 
habitable and arable 


The unique situation of the Netherlands makes it especially sensitive to climate change. 
The rise in sea level caused by global warming has exacerbated coastal erosion, which. 
necessitates continual remforcement of the shoreline, Traditionally this has meant that 
beaches have to be replenished with fresh sand every three to five years, an expensive 
operation which also disrupts the ecosystem and forces it to redevelop every time. 


EPUB 


Works That Work, No.1 


Dutch Design 


by Peter fitak 


An innovative project strengthens the Netherlands’ 
seacoast while creating new recreational areas and 
astable ecosystem. 


Caver photo: 21.5 million cubic metres of sand was dumped into the North Sea. creating 
the Zanemotre (Sand Engine), an artificial paninsuta of 128 acres, or 256 fouttall fied 
(Proto by Joop van Houdt, Rilkswaterstaat) 


‘The Netherlands is not only one of the most densely populated coun- 
tries in the world, but because of its unique geography (half of its surface 
lies below sea level), it is also very vulnerable to flooding. 

Apopular saying goes that God may have created the world, but the 
Netherlands was created by the Dutch. As proof, the Dutch can point to an 


PDF/PRINT 


MAGAZINE DISTRIBUTION THAT WORKS 
The layout is adapted to fit each format and 
appears differently on the website versus 

as an ePub or a PDF. The designers have 
taken into account the affordances of each 
publishing method and have organized the 
content accordingly. Design: Atelier Carvalho 
Bernau. Published by Typotheque, 2013. 


w-tew.co/aw9 


DUTCH DESIGN 


An innovative project strengthens the 
Netherlands’ seacoast while creating new 
recreational areas anda stable ecosystem. 


The Netherlands is not only one of the most 
densely populated countries in the world, but 
because of its unique geography (half of its sur- 
face lies below sea level), itis also veryvulnerable 
to flooding. 

A popular saying goes that God may have cre- 
ated the world, but the Netherlands was created 
by the Dutch. As proof, the Dutch can point to an 
entire province which consists entirely ofland 
reclaimed from the sea, and acomplex system of 
drain-ditches, dams, barriers, canals and pump- 
ing stations that keeps the country dry, habitable 
and arable. 

The unique situation of the Netherlands 
makes it especially sensitive to climate change. 
The rise in sea level caused by global warming 
has exacerbated coastal erosion, which neces- 
sitates continual reinforcement of the shoreline. 
Traditionally this has meant that beaches have 
to be replenished with fresh sand every three to 
five years, an expensive operationwhich also 
disrupts the ecosystem and forces it to redevelop 
every time. 

In2011an innovative alternative method of 
coastal protection was implemented by Rijkswa- 
terstaat and the Province of South Holland in the 
area between Rotterdam and The Hague: 21.5 
million cubic metres of sand was dumped into 
the North Seaall at once, creating the Zandmo- 
tor (Sand Engine), an artificial peninsula of 128 
hectares, or 256 football fields. Within 20 years, 
ifeverything works as expected, the wind, waves 
and sea currents will evenly distribute the sand 
along the 20-kilometre stretch of coast, rein- 
forcing the coastline and creating wider beaches 
and new recreational areas. Construction of 
the peninsula cost €70 million, an investment 
that should make further sand replenishment 
unnecessary in this area for the next 20years.An 
additional benefit is the creation of a stable local 
ecosystem. The Zandmotor has already become a 
popular destination for surfers and kite surfers. 
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WRITE ABOUT IT 


Writing on screen is nothing new and—apart from a handful of purists—it is 
the way people now write. This book, for instance, was almost entirely written 
with screen-based tools (namely, Adobe InDesign). Most word processors 
are not pretty, with their focus on utility and reluctance to innovate for fear of 
alienating legacy users. It’s about time that the writing experience be treated 
as worthy of design consideration in its own right. Elegant digital writing 
tools are on the rise, and this emerging genre has moved toward pared-down 
interfaces with limited formatting options. After all, most formatting details 
aren’t really needed until a text is ready for publication. 

Oliver Reichenstein and his colleagues at Information Architects authored 
the successful tool iA Writer, a word processor equipped with just one 
monospace font. Their goal was to eliminate distraction from the writer’s 
digital environment by offering fewer formatting choices. The writer styles the 
plain text using simple Markdown conventions. Focus Mode fades back the 
text surrounding a selected passage, encouraging the writer to concentrate on 
the highlighted content. 


a | am een Prien | 


The book as place 
Reading is distracting. 


I want you to consider the book as place because books aredefinedby @ 
their distinct boundaries and the space they contain. As place the book 
holds things as obvious as an author's words and ideas, but it also 
carries your attention. Place is distinct in its position and relationship 
to a surrounding geography. So a book on a shelf, in a bag, or in hand 
relates differently in each setting. Thus the book establishes our sense 
of direction and dimension. With that, the place establishes a space 
that goes beyond words and pages. A book seeps out into its 
surrounding environment, encompassing everything from the walls 
and the furniture to the noise level and present company. This is why 
you might seek out certain places for reading, whether that be ona 
park bench or quiet car with noise-canceling headphones. 


My favorite portrait of a reader, reading, and the relationship of book 
and place is by Italian artist and designer Bruno Munari. In 1944, 
Munari published a series of staged photographs titled, “Searching for 
comfort in an uncomfortable armchair,"1 The character Munari plays 
has a burdensome relationship with an armchair, but each scene is 


USER, READER, WRITER Medium is equal parts writing tool, 
publishing platform, and reading space. The elegance of the 
interface helps diminish barriers between person and text. 


=| Writing 


Good thing more people are developing elegant writing 
the genre is trending toward pared down interfaces wi 


formatting options to get in the way. 


TEXT-TO-HTML Markdown is a lightweight markup language 
designed for web writers; the tool makes for comfortable 
writing and reading, and it converts text to structurally valid 
XHTML or HTML. Markdown was created by John Gruber with 
contributions from Aaron Swartz in 2004. 


SEE HOW SIMPLE Below are examples of styling using the 
Markdown language and their HTML conversions. HTML 
headings are made by placing hashes corresponding to the level 
of heading desired, while emphasis is produced with enclosed 
asterisks or underscores. 


HEADINGS 


EMPHASIZING TEXT 
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ABIT NOSTALGIC iA Writer references the 
focus and utility of the typewriter, the tool of 
the high-tech writer before word processors 
came along. Nitti is a monospaced type 
family designed by Pieter van Rosmalen for 
Bold Monday. iA Writer design: Information 
Architects, 2011. 
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IN THE CLASSROOM: EXPERIMENTAL READERS 
WITH ERIC GUNTHER 


Interaction designer Eric Gunther, a partner in the Boston firm SoSo Ltd., 

led a workshop with graduate students at MICA in 2011 to create concepts for 
digital readers. The challenge was to conceive of new ways for users 

to interact with text on a device such as an iPad or Kindle. How might they 
navigate or customize the text of a book more intuitively? How might 
technologies such as natural language processing (used extensively in the 
work of SoSo Ltd.) create new approaches to filtering and transforming 
content? The ideas prototyped here include proposals for practical, user- 
centered features as well as a concept that critiques ideas of censorship and 
scientific rationality. 
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and healing them all. 


Looking at his disciples, he said: 
“Blessed are you who are poor, 
for yours is the kingdom of God. 


Blessed are you who hunger now, 
for you will be satisfied. 


The Book of Luke 
Chapter 6 


17 


He went down with them and stood on 
a level place. A large crowd of his 
disciples was there and a great numbe 
of people from all over Judea, from 
Jerusalem, and from the coastal region 
around Tyre and Sidon, 


who had come to hear him and to be 
healed of their diseases. Those troubled 


_by impure spirits were cured, 


and the people all tried to touch him, 
because power was coming from him 
and healing them all. 


Looking at his disciples, he said: 
“Blessed are you who are poor, 
for yours is the kingdom of God. 


Blessed are you who hunger now, 
for you will be satisfied. 


The Book of Luke 


Chapter 6 


17 He went down with them and stood on 
a level place. A large crowd of his 
disciples was there and a great number 
of people from all over Judea, from 2 
Jerusalem, and from the coastal region 3 
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“Blessed are you who are poor, 
for yours is the kingdom of God. 


Blessed are you who hunger now, 
for you will be satisfied. 


IN THE CLASSROOM: THE MUTANT LIBRARY 
WITH ELLEN LUPTON AND KRISSI XENAKIS 


Today many publications exist across multiple formats. It would be a waste of 
pixels to simply translate print work into static content for digital devices. Inter- 
active publications allow readers to discover visual surprises and access 
hidden information. By encouraging play, designers and editors can say more 
and leave a deeper impression. 

The examples shown here come from The Mutant Library, a digital 
anthology authored by designers in MICA’s Graphic Design MFA program. 
Each designer began by creating a sixteen-page print booklet documenting 
their personal reading list. Visiting artist Krissi Xenakis, a senior interaction 
designer at Joe Zeff Design, led a workshop on Adobe DPS, exposing the 
team to this powerful tool with a familiar interface. Designs for print and 
screen evolved side by side, each medium taking leaps that later informed 
the other. The project yielded a twinned collection: a boxed set of handbound 
books and a digital portfolio for the iPad, available in Apple’s App Store. 

The Mutant Library was published by MICA and Joe Zeff Design in 2013. 
Color, composition, and tone are essential elements for both print and 
screen. A successful screen design, however, employs these formal elements 

to signal the potential for change and interaction. 
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TOLLESON DESIGN 


Princeton Archivectural Press, 2000 
‘Non Aetion: Art fe Ostign 


‘An older colleague lent me this book on the first day of 
ny first design job. 1 remain in awe of the content and 
the design; it’s an insightful look into a brilliant design 
process. Reading through it, ! knew that { made the right 
choice in my decision to become a designer. 


JAVIERLOPEZ  Aninterface expresses the internal structure of a document (its 
ALICE HOM heads and subheads, tables and lists) as well as the framework of 
menus, buttons, and links that guides users through it. Whether 
they are sending text messages or reading news sites, people 
encounter screen-based text in countless circumstances. A well- 
designed interface helps shape the meaning and function of this 
constant stream of content. 

Digital users have become familiar with a range of interactions, 
from click, tap, and drag to pull, pinch, and swipe. Mouseover 
states and subtle animations make clear that interaction is 
available, as do basic typographic cues such as an underline or a 
change in color. Reacting to subtle depictions of light and shadow, 
users learn to anticipate how media will behave. Edges and planes 
that glow, bevel, cast a shadow, shimmer with transparency, or fade 
into light or darkness indicate doors to new information or events. 

Interactive media projects are built in layers, yielding a complex 
three-dimensional space that allows content to move in and out 
of visibility. Constructing this architecture is a major task for the 
interaction designer, who creates an expanded canvas for the user 
to travel through and across, deep into and beyond the frame. The 
principle of hide and reveal allows designers to display more data— 
at larger sizes—within the limited window of a browser or device. 

Designing an interface for dynamic content demands 
considerable planning. Wireframes—diagrams of a project’s 
basic elements—can help communicate the designer’s intent to 
developers and clients. Wireframes are a form of prototype, an 
approximation of a product that explains its features and tests its 
functionality. Prototypes are crucial tools for designers in any field. 

This chapter starts with a bird’s-eye view of the overall 
structure of a site before taking a closer look at the details that 
invite human touch and agency. 


MAX PLANCK INSTITUTES MULTITOUCH INSTALLATION 
Design: Moritz Stefaner and Christopher Warnow, 2011. 
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WIREFRAMES 


A wireframe represents the skeletal structure of a website or application. 
Also referred to as a page Schematic or a Screen blueprint, a wireframe uses 
simplified elements to represent basic content areas and the elements of 
page navigation. Designers keep the design simple and abstract in order to 
avoid getting involved too early in conversations about colors, fonts, and image 
choices. Bars, blocks, and fields of gray serve to communicate the essential 
structure and functionality of the site. 

Initially, a team might work with pencil on paper, moving on to low-fidelity 
wireframes, which serve to quickly convey the different page types that might 
appear in a site. These simple diagrams explain the big differences and broad 
concepts. As work progresses, high-fidelity wireframes are produced, which 
provide more detail about specific content and the types of interactions that 
lead from one page to the next. 
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ee = —— 1 
—— - 7 
= o os 
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Log in = 
Job Dashboard New Job Post: Step 1 New Job Post: Step 2 
New Job Post: Step 3 
LOW-FIDELITY WIREFRAME In addition to showing where basic 


blocks of information will fall, a low-fidelity wireframe can be 
used in site maps, user flows, and other UX (user experience) 
documents as simple depictions of page layouts. Design: Yvonne 
Weng, Barrel, 2013. 


ACTIVITY SETTINGS 
po ie u 
When should this activity start? @ 
When should this activity end? : ~ 


Save Draft Ec aimm Discard Activity 


GRAYSCALE Working primarily in grayscale allows the designer to 
clearly communicate hierarchy. Design: Yvonne Weng, Barrel, 2013. 
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INTERACTION ELEMENTS 


To create wireframes efficiently, designers employ simple graphics to 
represent commonly encountered forms of interaction. Even these seemingly 
neutral components are designed with a certain sensibility, however, and 
express the designer’s point of view. 


control buttons collapsible box loading 
| fale l>itisixieis[ziol~|~|x]+]- a bs RSS 
breadcrumbs buttons bubbles drop-down 
sa Ed 
Ed 
search form =a = 


USER INTERFACE SET Offered for free download (with 
attribution), these interface elements have a clean, flat style. 
Design: MediaLoot, 2010, http://medialoot.com/item/massive- 
web-button-and-ui-set/. 


MOUSE CURSORS IN CSS The cursor property in CSS specifies 
the type of cursor to be displayed when pointing to an element. 


Each cursor represents a different interaction. 
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cursor: auto 
AUTO (DEFAULT) 


ap 


CUISOT:e-resize 
WINDOW RESIZE 
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CUursor:move 
ELEMENT MOVES 


CUTSOT:progress 
WAIT 


== 


cursor:crosshair 
PRECISE POINTING 
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cursor:help 
HELP 
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Cursor:pointer 
LINK 
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cursor:text 
INPUT TEXT 
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cursor:auto 
AUTO (DEFAULT) 
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cursor:draw 
FREE DRAW 


CUrSOT:move 
ELEMENT MOVES 
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CUursor:paint 
FILL WITH COLOR 
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cursor:hand 
GRAB CANVAS 


en 


cursor:search 
SEARCH 


‘\ 


cursor:resize 
DIAGONALLY RESIZE 


Cursor:v-resize 
VERTICAL RESIZE 


WIREFRAME ELEMENTS When creating a wireframe, 
designers employ standard elements to represent how a user 
is expected to interact with the material. 


BUTTON 


TEXT BOX A box in which to 
enter text or numbers. 


RADIO BUTTON A list of 
items that allows just one 
item to be selected. The 
name derives from the row of 
mechanical push buttons on 
a car radio receiver. Selecting 
a new button from the list 
triggers the deselection 

of any previously selected 
button. 


BUTTON A virtual equivalent 
to a push button; the rounded 
corners imply dimension and 
have become associated with 
buttons. 


Item 1 


A tren 2 
A tren 3 


CHECK BOX This box 
indicates an “on” or “off” 


condition. More than one box 
in the list can be selected 
simultaneously. Sometimes 
it appears shaded or dashed 
to indicate a mixed or 
intermediate state. 


Item Link 


HYPERLINK Text marked 
with underlining and/or color 
indicates that clicking it will 
take the user to another 
screen, page, or targeted 
location. 


Vv 


DROP-DOWN LIST A menu 
of items from which the 
user Can select one. The 

list normally only displays 
its content when a special 
button or indicator is clicked. 


>| < 


Item 1 


Item 3 Vv 


COMBO BOX A combination of 
a drop-down list and a single- 
line text box, which invites 
the user to either type a value 
directly into a box or choose 
from the list of existing 
options. 


Item 1 A 


Item 3 


Item 4 Vv 


LIST BOX A list box allows 
the user to select one or more 
items from alist contained 
within a static, multiline 

text box. 


MOUSE VS. FINGER During wireframing, designers must 
allow enough space for interaction to occur. A mouse pointer 
can accuratley interact with objects as small as 1px, while an 


average user's finger will need SOpx in height to perform the 


same interaction when tapping a touch device. 


Item Link 


Item Link 


30° 


JIVAYMALNI GNV 3dAL \\ EOL 


N3duY9S NO adAL \\ VOL 


MENUS 


A menu is one of the most common navigation structures; it typically consists 
of an array of choices, each one serving as a link to different content. It can 

be vertical or horizontal, hidden or persistent. Type is an essential ingredient 
in the construction of a clear, concise, understandable menu, because most 
menus include lists of words. Images, icons, and design elements such as 
boxes, bubbles, and lines are also ubiquitous components of menus and other 
navigation structures. This language—both verbal and visual—must be edited 
for clarity and designed for readability. The styling, position, and behavior of 
navigation elements must make sense to users. 


SHOWING INTERACTION 

On screen, designers use 

underlines, color changes, 

and animation effects to click to begin 
indicate that a line of type is 

a navigation element. 


VERBAL CALL TO ACTION 
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ANIMATION 


ICONS AS WAYFINDING This app is designed 
like a set of cards arranged ona table. The 
icons serve as navigation. The user can swipe 
left, right, up, or down to move from one 
screen to the next. Design: AKQA, 2013. 


The persistent menu on the left displays a 
drop-down submenu that lets users pick an 
animal to explore. 


Each card can be accessed from the drop- 
down menu, with the exception of a few 
that are unlocked after the user has visited 
others. 


PERSISTENT This menu 

is always present, usually 

on the left side of a page. 
Typically exposing all options, 
its most common useisina 
tabbed menu. 


DROP-DOWN These menus 
commonly appear with 
horizontal navigation, 
providing deeper options 
beneath each section in the 
primary navigation. 


SLIDER This device functions 
like a drawer, sliding in 

and out of a hidden space 
anytime it is needed. It could 
be considered a variation of a 
drop-down menu. 


TABS Always present, tabs 
typically appear along the top 
edge of the screen. Usually 
exposing all options, tabs 

are based metaphorically on 
the stepped tabs of a series 
of file folders ortabsina 
notebook. 


Item 3 


Item 2 


Item 3 


Item 4 
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from the recent archives of A List Apart, sprinkled with some of our favorite outside links. 


TYPE AS NAVIGATION 


In a website, a path is a consistent, predictable route that connects content. 
A path can emerge from the user’s own habits or it can be created by a 
designer through explicit text-based navigation elements. A breadcrumb 
trail depicting a path is one form of type-based navigation, but typography 
can serve as navigation in numerous other ways as well, including text links, 
anchor links, and tags. 


Text links Category1/Article2 Anchor Link Category 1, Category 2 
TEXT LINKS A word or phrase BREADCRUMBA string of ANCHOR LINKS Named TAGS Popular on blogs, 
surrounded by <a href> tags text shows the user their anchors take the user to tags apply categories to an 
creates a link to another position within a path or a specific place on a page. article or entry, creating a 
location. These can be sequence. These are usually styled like kind of page-by-page index 
styled with color, underlines, other text links. for the site. Tags are usually 
mouseover states, and other separated by commas and 
means. appear in simple lists. 
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4H articles coLUMNS BLOG = Torics 
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Summer Reading Issue 


by ALA STAFF - July 09, 2013 
Published in Browsers, Content Strategy, State of the Web, Mobile/Multidevice, Responsive Design, 


Interaction Design » Nu Comments (yet) 


Presenting the second annual ALA Summer Reading Issue—a deep pool of editor's picks 


A LIST APART uses tags to categorize articles READ MORE >> Patrick J. Lynch and Sarah Horton, Web Style 
under more than one category. Creative Guide, 3rd ed. (New Haven: Yale University Press, 2009), 
direction and design: Mike Pick, 2013. http://webstyleguide.com/wsg3/4-interface-design/2- 


navigation.html. 
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NOVELI 


Ser Ciappelletto cheats a holy friar by a false confession, and 


dies; and, having lived as a very bad man, is, on his death, 


reputed a saint, and called San Ciappelletto. 


ps Aseemly thing it is, dearest ladies, that whatever we do, it be begun in the 
holy and awful name of Him who was the maker of all. Wherefore, as it falls to 
me to lead the way in this your enterprise of story telling, I intend to begin 


with one of His wondrous works, that, by hearing thereof, our hopes in Him, 
in whom is no change, may be established, and His name be by us forever 
lauded. 'Tis manifest that, as things temporal are all doomed to pass and 
perish, so within and without they abound with trouble and anguish and 
travail, and are subject to infinite perils; nor, save for the especial grace of 
God, should we, whose being is bound up with and forms part of theirs, have 
either the strength to endure or the wisdom to combat their adverse 
influences. By which grace we are visited and penetrated (so we must believe) 
not by reason of any merit of our own, but solely out of the fulness of God's 


own goodness, and in answer to the prayers of those who, being mortal like 


ourselves, did faithfully observe His ordinances during their lives, and are commonly writte 


now become blessed for ever with Him in heaven. To whom, as to advocates 
taught by experience all that belongs to our frailty, we, not daring, perchance, 
to present our petitions in the presence of so great a judge, make known our 
requests for such things as we deem expedient for us. And of His mercy richly 
abounding to usward we have further proof herein, that, no keenness of 
mortal vision being able in any degree to penetrate the secret counsels of the 
Divine mind, it sometimes, perchance, happens, that, in error of judgment, we 
make one our advocate before His Majesty, who is banished from His presence 
in eternal exile, and yet He to whom nothing is hidden, having regard rather to 
the sincerity of our prayers than to our ignorance or the banishment of the 


IL DECAMERON Using public domain @ MOUSEOVER STATE As the user moves @ IMMEDIATE BIBLIOGRAPHY References 


content from Project Gutenberg, the cursor over the title of each novel, a in the margin allow readers to quickly 


ildecameron.com displays the entire brief introduction to it appears. view related links without having to 
text of this complex literary work. jump to the bottom of the page. 

‘ VISUAL ANCHORS Paragraphs are 
The book takes place over a period of 


ten days, and each day is comprised indicated with gray, outdented markers, 


of ten stories (novels). Design: Javier 
Lopez, 2012. 


allowing users to quickly track their 
progress as they read through the book. 
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EXPANDING THE VOCABULARY 


As designers explore new approaches to interactivity, the standard language 
of navigation is growing. Touch-enabled screens present a different 
relationship between the user and the content, adding a rich vocabulary of 
gestures to the established lexicon of interactivity. The screen of a tablet or 
mobile device may be small, but it expands in this new world of touch and 
gesture. 


TOUCH GESTURE These 


Tap Double tap Drag Flick 
diagrams present some of 
the interactions that have 
become common on touch- 
enabled devices. Design: 
Pinch Spread Press Press and tap Craig Villamor, Dan Willis, and 


Luke Wroblewski, 2010. 


OO 


wal. AT&T 4G 9:44 AM 52! ntl 4G 9:44 AM 52 m_ AT&T 4G 


a | Swipe Interaction research Expand 


Interaction research Layout check Swipe 


Layout check 


Release to Craiite |) 


Interaction researc 


Layout check 


INCORPORATING GESTURE Clear is a to-do-list app. The user employs 
gestures such as pull down, pinch apart, swipe, and drag in order to cross out, 
expand, or delete items ina list. Design: Realmac Software, 2012, http://www. 
realmacsoftware.com/clear/. 
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MOBILE NAVIGATION The mobile editions of 
the New York Times include navigation that is 
both innovative and intuitive. 
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WIKIWEB This iPad app lets users reformat articles from 
Wikipedia. The weblike interface connects the selected 
article with related topics. Design: Friends of the Web, 2013. 
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DROP SHADOWS AND GRADIENTS 


A drop Shadow is a replica of a graphic object that has been offset behind 
it; the designer has powerful tools for adjusting the angle (light source) and 
transparency of the shadow. A gradient is a graduated mix of two or more 
colors; gradients can be adjusted to simulate the effects of light and shadow. 
Interface designers use drop shadows and gradients to achieve an illusion 
of three-dimensionality on screen, calling attention to objects that the user 
can interact with and suggesting the layering of elements in depth. As screen 
conventions become increasingly familiar to users, not every button or speech 
bubble has to pop off the surface like a glowing jelly bean. The careful and 
subtle use of shadows and gradients can successfully communicate the 
potential for interaction while indicating relationships and emphasizing 
specific elements. 


a \ f > 10S 7 Created under the art direction 
= of Jonathan Ives in 2013, iOS 7 helped 
Apple move away from its long 


tradition of illusionistic design toward 
< Messages Paul Zemanek Conta a flatter, simpler aesthetic. 


secee > 9:41AM 10 


Uh-oh. 


The semi-transparent background 
of the top bar lets users see text 
messages slide underneath it. 


Jan 20, 2013, 9:14 PM 


Mar 18, 2013, 7:32 PM 


The white background and flat 
speech bubbles display text more 
clearly. 


QWERTYUIO ® 
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lighter typeface identifies 
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BEFORE AFTER 


ABOUT THE AUTHOR 


ABOUT THE AUTHOR 


Young Sun Compton (bor! 
is an American designer, 
philanthropist. Compton 


an author and environme: 


SHADES OF GRAY The icon bar employs a 
subtle gradient, changing from light gray on 
the top to a darker gray on the bottom. 


Young Sun Compton (born July 15, 1988) 
is an American designer, adv 
philanthropist. Compton is ci 

ror st 


POSTED 
VISUA 
LIZATIONS 


Levels of PH rise in acid rain 
from the Midwest to the Northeast 


Acid rain, or precipitation, comes in many forms: 
rain, snow, sleet, hail and fog, and as deposits of acid 
particles, aerosols and gases. 


Melting glacier water and sea level rise 


The world’s glaciers lost 260 gigatons of water each 
year between 2003 and 2009, making these rivers of 
ice responsible for almost a third of sea-level rise in 
that time, new research finds. 


C02 emission growth from 1990 to 2010 


5 


ABOUT THE AUTHOR 


Young Sun Compton (born July 15, 1988) 
is an American designer, advocate and 
philanthropist. Compton is currently 

an author and environmental activist. 
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CONSISTENT LIGHT SOURCE It is important to 
be aware of the sources of light and shadow to 
maintain a consistent and logical illusion. All 


shadows ina project should follow the same 
directionality, adjusted according to context. 
Below is the same shadow appearing over both 
a light and a colored background. Notice the 
harder separation when the object appears 
against a lighter background. 


45° light source; 
15% black; 


Multiply 


_@ 


on (born July 15, 1988) 
signer, advocate and 
mpton is currently 
ironmental activist. 


45° light source; 


Multiply 


45° light source; 


Multiply 


LINES AND SHADOWS Subtle line strokes can give 
dimensionality to an interface. The drop shadow 
along the top of the box uses a dispersed (offset) 
light source to keep the black tonality consistent. The 
circle that holds the picture, however, has a varied 
offset setting, creating a uniform shadow around the 
whole circle. The image is not an interactive element. 


Design: Javier Lopez, 2013. 


MORE TO COME Here, increasing transparency 
reinforces the idea that there is more text to 
read. This setting does the opposite of what 

a shadow does: It hides what is in white and 
shows what is in black. The stroke along the 
bottom of the element indicates a break in 
the space. 
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HIDE AND REVEAL 


The principle of hide and reveal is at work in numerous contexts within 
interface design. The ability to display massive amounts of data ina 

small space by burying information and then bringing it to the surface is a 
fundamental feature of interactive media. Layering information and allowing 
the user to choose what content appears gives designers the opportunity to 
work with larger type than is possible on a static surface. 


I see light breaking out of a dark mass of air; 
it appears, therefore, that he has done enough since 
just remember that the last laugh is on you. 
Tam leaving it behind to lighten my baggage. 
All day I am wandering through the groves and 
their work focuses on processes, not on products. 
Each one is different and I have specific reasons, 
The tour goes on for the larger part of the year, 


for you it’s totally free. I love you so much: 
they soon put their own stamp on the game. 

Its definition is always contested. 

You tell it frequently enough so it is believed; 
I fear the world is facing her demise, 


I don’t have to constantly count the minutes: @ 


@ = 


I see light breaking out of a dark mass of air; 
it , therefore, that he has done enou; 


= 


just remember that the last laugh is on you. 
Tam leaving it behind to lighten my baggage. 
All day I am wandering through the groves and 
their work focuses on processes, not on products. 
Each one is different and I have specific reasons. 
The tour goes on for the larger part of the year. 
I don’t have to constantly count the minutes: 
for you it's totally free. I love you so much: 


WRITING AS NAVIGATION This innovative portfolio 

website greets the user with a set of sentences that serve 
as navigation. Each line of text can be clicked and leads to 
a preview of a piece in the designer's portfolio that can be 


viewed in its own page after the jump. Design: Juan Astasio, 


2011, http://www.astasiototal.com/astasiototal_2011/. 


The green text on either 
side of the page creates 
two areas of navigation, 
leaving the center of the 
page open for reading. 


Mouseover underlines the 
sentence and reveals a 
category for each portfolio 
piece. On clicking, the line 
spacing opens up to show an 
image and a description. 


Arts Majors 


Arts Majors 


SNAAP The Strategic National Arts Alumni Project 
(SNAAP) looks at what art students do after graduation. 
These visual representations of the data are displayed in 
a compact space; information is revealed as certain areas 
are moused over. Indiana University, “SnaapShot 2011,” 
2012, http://snaap.indiana.edu/snaapshot_2011/. 


The starting page shows 
100 percent of the 
participants in the study, 
divided into color-coded 
percentages. 


Mousing over a specific 
segment reveals a box with 
more information. Mouseover 
also darkens the other 
segments, which are not 
highlighted. 


PROVIDENCE © RHODE ISLAND y 
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CONGDON & CARPENTER COMPANY 
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TOO MUCH INFORMATION If all of the content 
contained in this interactive map was displayed 
at once (above), the map would be impossible to 
read. Through the principle of hide and reveal, the 
designer is able to tell a story about every historic 
building on the map. Data source: The Providence 
Preservation Society and The Providence Plan, 
“Providence Preservation Society Industrial Sites 
and Commercial Buildings Survey 2001-2002,” 
http://local.provplan.org/pps/. Design: Sarah 
Robertson, 2012. 


BEHIND THE FENCE Chapter titles are revealed 
by tapping the chain-link fence in this iPad app 
about an adolescent’s list of forbidden books. 
Produced with Adobe DPS. Design: Richard 
Blake, 2013. 


NOW YOU SEE IT Text is revealed when 
the user taps a title in this iPad app. Produced 
with Adobe DPS. Design: Amy Lee Walton, 2013. 


AIVAYMALNI ONV 3dAL \\ ELL 


N3duY9S NO AdAL \\ vLL 


TYPOGRAPHY AND DATA DISPLAY 


Visual representations of numerical data can communicate complex 
information in a clear, expressive, and illuminating manner, revealing patterns 
and relationships that would otherwise remain hidden in lists of numbers. 
Data visualization is a tool for both research and storytelling. Researchers 
use simple graphs and charts to rapidly compare data sets, while visual 
journalists employ similar means to narrate a story. Charts, graphs, and tables 
have countless uses in the worlds of finance and commerce as well. Whether 
employed for scientific research or public communication, nearly every 
instance of information design relies on typography to label visual elements. 


TYPE AND COLOR DATA VALUES 


+67+22+39+ 100+! )+6B+12+5+35+ 


controls grid increments TURN ON “STYLISTIC ALTERNATES” 


BARS 


Width automatically adjusts to fill the circle, 


AREAS AND LINES based on number of values provided 


FF CHARTWELL Distributed as a typeface, FF Chartwell is a set 
of tools for constructing graphs. Chartwell employs OpenType 
features to interpret and visualize the data keyed in by the 

25+5+100+45+23 designer in simple numerical statements. The data remains 
editable text, making it easy to update the graphics. Design: 
Travis Kochel, 2012. 


SOME BAD PIES 


NUMBERS TOO BIG Since the percentage 
values are represented visually by the 
slices, there is no need to restate them 
so prominently. 


13.5% AMERICA 


TEXT TOO FAR AWAY The reader won't 
know which label goes with which slice. 


15% AFRICA 
0.5% OCEANIA 
13.5% AMERICA 
11% EUROPE 
60% ASIA 


BUSY WORK Using lines to connect the 
text with the slices creates visual noise. 


15% AFRICA 


0.5% OCEANIA 


13.5% AMERICA— 


11% EUROPE a 


60% ASIA 


SOME GOOD PIES 


EMPHASIZE THE NAME, not the 
number. 


AMERICA 135% 


RING INSTEAD OF PIE The open circle 
makes space for a label to fit inside. 


ASIA 60% 


pMERICA 13.595 


INTERACTIVE PIE Clicking on a label 
illuminates that slice, connecting 
written and visual representation. 


(ASIAGO% EUROPE 11% 


AFRICA 15% OCEANIA 0.5% 
AMERICA 13.5% 
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DESIGNING DATA TABLES 


Ordering information into lists is the foundation of designing data tables. 

A table is a bundle of horizontal and vertical lists, which can be read both 
from top to bottom in columns and from left to right in rows. The relationship 
between columns and rows expresses the meaning of a data set. A well- 
formatted table can be read easily in both directions. Creating a basic table 
is the first step in converting raw data into valuable visual information. The 
structure you give to a list can convey its purpose. Factors such as alignment, 
indents, symbols, and nesting should work with the content to establish 
hierarchical values. Clear, consistent typography will help users understand 
your tables. 


legend/caption 


ANATOMY OF A DATA TABLE Tables are 
constructed of rows and columns. Each cell, 

or data field, in a table contains one fact. A 
row represents one record of related data. 
Columns contain attribute values related to 
each row. Each column is reserved for one type 


of information. Diagram: Alice Hom, 2012. 


THE ORDER OF THINGS There are three kinds of lists in HTML: ordered <ol>, 
unordered <ul>, and definition <dl>. Ordered lists are marked with numbers; 
unordered lists are marked with a graphic symbol or “bullet”; definition lists 
contain descriptive text. 


<ol> <ul> <dl> 
<li> Apples </li> <li> Apples </li> <dt>Apple</dt> 
<li> Oranges </li> <li> Oranges </li> <dd>A California computer maker.</dd> 
<li> Kiwis </li> <li> Kiwis </li> <dt>Orange</dt> 
<li> Pears </li> <li> Pears </li> <dd>A round fruit of a tree.</dd> 
</ol> </ul> </dl> 


Basic Print & Web Licence 
(EULA) 


Multiple-User Licence? 
Webfont Licence 


Self-Hosting Webfont 
Licence 


Server Licence 
Broadcasting Licence? 
Service licence? 


Apps and eBooks 
Embedding Licence (OEM) 


Corporate licence 


Print Web PDF TV Embedding Third parties 
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MANAGING OPTIONS 

This table is a list of available 
type formats listed in 
columns and coordinated with 
various licensing options set 
in rows. The table structure 
and colored icons make 
comparison shopping easier. 
Design: Typotheque, 2013. 


TEXT ALIGNMENT In this table, the text alignment 
varies by data type to support the ease of browsing 
across columns and rows. Design: Alice Hom, 2012. 


APPLES 


ORANGES 


KIWIS 


PEARS 


Left-aligned text provides a 
familiar entry point into the 


content. 


ORIGIN 


LOCAL 


IMPORT 


IMPORT 


LOCAL 


Lists of icons or single glyphs 
are centered in order to avoid a 
lopsided appearance. 


Right- or decimal-aligned lists of 
numbers help users scan columns 
of numbers. 
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DATA TABLES: DO’S AND DON’TS 


The tables shown here use alignment, rules, color, column width, and line 
spacing to structure information. Text that is aligned left, right, or centered 


immediately creates vertical structure; often no additional dividing lines are 
needed. Begin with clearly aligned text, and add vertical and horizontal rules or 


bands of color to emphasize relationships or draw attention to key data. 


ROW & COLUMN SPACING Consider how row height and 
column width affect the overall readability of the table. 


Table design: Alice Hom, 2012. 


TYPE ORIGIN COUNT. UNIT PRICE 
APPLES LOCAL POUND 2.00 
ORANGES IMPORT 5 POUND 6.00 
KIWIS IMPORT. 4 EACH 0.50 
PEARS LO 1 POUND 2.00 
TYPE ORIGIN cou UNIT PRICE 
APPLES LOCAL POUND 2.00 
ORANGES IMPORT 5 POUND 6.00 
KIWIS IMPO 4 EACH 0.50 
PEARS LE 1 POUND 2.00 


TYPE ORIGIN COUNT U PRICE 
APPLES LOCAL 3 POUND 2.00 
ORANGES IMPORT POUND 6.00 
KIWIS IMPOR 4 EACH 0.50 
PEARS CAL 1 POUND 2.00 


APPLES LOCAL 3 POUND 2.00 

ORANGES IMPORT 5 POUND 6.00 

KIWIS IMPORT. 4 EACH 0.50 

PEARS AL 1 POUND 2.00 
FRUIT COUNT UNIT PRICE 
APPLES 3 ND 2.00 
BLOOD ORANGES 5 POUND 6.00 
KIWIS EACH 0.50 
PEARS 1 POUND 2.00 


TYPE ORIGIN COUNT T PRICE TYPE ORIGIN COUNT UNIT PRICE 
APPLES LOCAL POUND 2.00 APPLES LOCAL 3 POUND 2.00 
ORANGES IMPOR, 5 POUND 6.00 ORANGES IMPORT 5 POUND 6.00 
KIWIS ORT 4 | EACH 0.50 KIWIS IMPORT 4 EACH 0.50 
PEARS LOCAL 1 POUND 2.00 PEARS LOCAL 1 POUND 2.00 
DATA PRISON Too many gridlines separate the cells, THE HEADER LINE is the only row divided with a horizontal 
creating what Edward Tufte has called a “data prison.” rule. 
TYPE ORIGIN COUNT PRICE TYPE ORIGIN COUNT UNIT PRICE 
APPLES LOCAL POUND 2.00 APPLES LOCAL 3 POUND 2.00 
ORANGES IMPORT. 5 POUND 6.00 ORANGES IMPORT 5 POUND 6.00 
KIWIS RT 4 EACH 0.50 KIWIS IMPORT 4 EACH 0.50 
PEARS LOCAL 1 POUND 2.00 PEARS oe 1 POUND 2.00 


DOUBLE BORDERS are clunky and add no useful information. 


TYPE ORIGIN COUNT PRICE 
APPLES LOCAL POUND 2.00 
ORANGES IMPORT. POUND 6.00 
KIWIS 4 EACH 0.50 
PEARS LOCAL 1 POUND 2.00 


VERTICAL LINES disrupt the reading of rows. 


APPLES 


ORANGES 


KIWIS 


HEAVY HORIZONTAL RULES overshadow the content. 


ORIGIN 


IMPORT. 


COUNT 


VARIED HEADER AND ROW LINES express quiet hierarchy. 


APPLES LOCAL 3 POUND 2.00 
ORANGES IMPORT 5 POUND 6.00 
KIWIS IMPORT 4 EACH 0.50 
PEARS LOCAL dl POUND 2.00 


SHADED HEADER AND ROW LINES further define hiearchy. 


APPLES 


ORANGES 


KIWIS 


PEARS 


A COLOR BAR emphasizes the price column as key information. 


LOCAL 


IMPORT 


IMPORT 


LOCAL 


APPLES LOCAL 3 POUND 2.00 
ORANGES IMPORT 5 POUND 6.00 
KIWIS IMPORT 4 EACH 0.50 
PEARS LOCAL 1 POUND 2.00 


VIBRATING COLORS, or colors that are very close in value, 
fail to create visual separation. 


SUBTLE SHADES of a single color let the text stand out. 
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‘CASE STUDY 
TRAVEL INTERFACES 


Travel booking sites depend on timetables to communicate available flights, 
hotel rooms, and rental cars to consumers. Itinerary selection is a prime 
example of data formatted into lists and tables. Presenting the available 
information in a tabular format helps users navigate on their own terms. 
Whether they are making decisions based on airline, price, duration, or number 
of stops, users can isolate variables easily by looking at these columns. 

Customers of the travel-booking site Kayak will encounter multiple display 
layouts depending on their device and screen format. 


Abflug 


g Abfiug 
Departure 


Departure 


anil fokgenden Weo7eiien 
tima to get to: 


. A 10 -15 Min 
. B 10 -15 Min. 


sepia Lee ooh ; me E 15 - 20 Min 


ZURICH AIRPORT The departure screens display condensed 
rows of type, which rotate to make room for additional flight 
information at this busy international airport. Photo: Javier 
Ortega Figueiral. 


Hotels Cars Deals More 


Flights 


Baltimore, MD >| New York, NY 07/30/2012 | [Fina Fights | 


9 of 12 flights 


Sort | Price= | Airline Takeoff Landing Duration Matrix 


‘Show toolbox 


Ala American Airlines BWI 2:50p » JFK 4:15p 1h25m nonstop 


Stops 
%) nonstop 


A) 1 stop sat AAcom $200 
American Eagle operates fight 9064, 

Times 

Toker nae A paita BWI 10203» JFK 3145p 5h25m 1 stop (ROU) 

Departure take-off _ 


Mon 9:30a ~ 8:30 


Pinnacle DBA Delta Connection operates fight 9725, 4141 


Cabin 
| Economy $230 
| Fest $929 


A potta BWI 5:40p » JFK 7:20p ih40m nonstop 


) Mixod $526 


Airlines 
select all | clear 
| American Aitines 


Dibeds 


Delta $280 


Pinnacle DBA Datta Connection operates fight 9960, 


2) Date wii $291 A pata BWI 1020a > JFK 1:54p 3h3%m 1 stop (RDU) 
19) US Airways a 


| Mutiple Airines 
Star Aliance SkyTeam oneworld 


More Fitters... Pinnacle DBA Datta Connection operates fight 3725, 2406. 


+ JFK 11:57» 3h50m 1 stop(CLT) 


Usairways $395 


YE Multiple Airtines: BWI 10:20a + JFK 4:10p 5h SOm 1 stop(RDU) 


American Airlines 
BWI 2450p » JFK 4:15p © Duration 1% «> Nonstop 


$230 


$241 


per pera 


$280 


JFK Nonstop 


© Duration 1% 


Delta 


BWI 10:200 > JFK 1:S4p © Duration 3% «=e Stops 1 
r elt is 8 Might Flights 


BWI + JFK Jan 21 
BW 4:40p = JFK 928p © Duration 4% eS Sops 1 $ (USD) per ticket taxes & fees included 


> $306 % JetBlue Airways DP 


Hit ATAT 0:25 PM o= 
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$291 


> > p> p> & 


US Airways 
$395 BWI 807p » JFK © Duration 3% 


$320 Aa American Airlines GD 
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IN THE CLASSROOM: WEATHER APPS 


WITH JAVIER LOPEZ 


During this project led by Javier Lopez in a Typography II course at MICA, 
students designed prototypes for a weather app. In addition to establishing 
a systematic family of icons representing weather conditions, students 
created compelling and readable information layouts, including page views 
for a single day’s weather and a weeklong forecast. Combining text with 
icons in a meaningful hierarchy was key to success. Color could be used as 
part of a consistent brand identity or to convey information about weather or 


temperature conditions. 


9:20 AM 


Baltimore, MD 
Monday 


53° 


SUNNY 


(Ps MPH/N 
5:23 le 


wll 9:20 AM 


Baltimore, MD 


be 


307 D2. io MPHIN 


Pa Jos 25° Smeu/n 


Ww © 100% 
why 3/09 18° ismenn 
sins» 


rT. 1 oO 100% 
3/10 8 MPH/N 


LONDON, UK 
MON 03/04 
Rainy 


NOEL CUNNINGHAM _ Designers have long used icons to communicate information across 
ABEGARCIA linguistic and cultural barriers, creating signage and information 

BRIAN PELSOH graphics directed at global audiences. With the advent of modern 
computing and the graphical user interface (GUI), web designers 
have employed icons to help cross the language barrier between 
computers and humans. In the 1980s the new ethos of user- 
friendly design democratized the computing environment—one no 
longer had to be a computer scientist to access this powerful new 
technology. Stark depictions of trashcans, folders, and exploding 
bombs signaled a new age of personal computing. 

The acceleration of technology has created a world that our 
ancestors could not have imagined, yet the use of pictograms 
and ideograms far precedes the invention of formal writing 
systems. Icons depict objects and concepts rather than spoken 
words, aiming to convey ideas quickly and universally. The design 
of icons is governed by tacit rules and guidelines as well as by 
shifting trends and constraints. Digital icons have evolved from 
simple bitmapped marks plotted on graph paper into colorful 
images shimmering with detail and depth. The profusion of lavish 
and elaborate icons has dissolved the divide between icons as 
functional interfaces and icons as linchpins in commercial brands. 

Such commercial icons are akin to logotypes, another 
ubiquitous feature of the digital landscape. A logotype 
communicates the name of an organization, product, or brand 
through a distinctive typographic treatment. Although the word 
logo means “word,” many logos use pictorial representations 
and abstract symbols to supplement or replace written text. 
Contemporary logo design has evolved from an ethos and ideology 
grounded in the constraints of print reproduction to a full-fledged 
multimedia endeavor. 

Like type designers, creators of icons and logos seek to 
generate images that function at sizes large and small. And, like 
type designers, they seek to balance the desire for originality 
against the need to communicate through familiar references. 


ICONS: SWITCHBOARD, PENCIL, PRESS, 
AND DOCUMENT Design: Abe Garcia, 2012. 
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WRITING WITH PICTURES 


Contemporary interface icons are rooted in the pioneering work of Otto 
Neurath, who worked in Vienna in the 1920s and later in the Netherlands and 
the United Kingdom. Neurath, trained as a philosopher and social scientist, 
was the inventor of Isotype, a picture-based approach to education. The term 
Isotype stands for International System of Typographic Picture Education. 
Together with Marie Reidemeister (whom he married in 1941), Neurath 
produced innovative exhibitions, public information posters, and illustrations 
for books and magazines. He and a team of draftsmen, illustrators, and 
“transformers” employed simple, direct imagery to communicate complex ideas 
to a broad public. (The “transformer,” who functioned like today’s information 
designer or visual journalist, compiled data from scientific sources, constructed 
a meaningful story or focus, and created conceptual sketches that became the 
basis of production-ready graphics.) They were joined in 1928 by graphic artist 
Gerd Arntz, whose four thousand symbols form the core of the Isotype system. 

While Isotype is best remembered for its stark silhouettes of babies, 
factories, and stalwart citizens, the icons served a higher purpose: to translate 
complex information into charts, maps, and diagrams that could be understood 
primarily through visual perception, with minimal reliance on written words 
and numbers. Isotype aspired to achieve scientific neutrality, leaving the 
interpretation of the naked facts open to the viewer. The system’s visual style 
eliminated unnecessary details, combining the objectivity of a photograph with 
the schematic simplicity of a letterform. The Isotype Institute deployed its vast 
dictionary of icons in diverse ways over decades of publishing. 

By the time the Isotype Institute closed in 1971, global pictograms were a 
worldwide phenomenon, applied to wayfinding, news graphics, instructional 
literature, Olympic Games branding systems, and more. Today icons are an 
integral part of user interface design, where they represent actions and ideas 
while conserving space and minimizing linguistic barriers. 


WORDS DIVIDE, IMAGES UNITE Believing in the power of visual READ MORE >> Marie Neurath and Robin 
images as a global language, Otto and Marie Neurath aimed to Kinross, The Transformer: Principles of Making 
help average citizens grasp socioeconomic concepts. Working with Isotype Charts (London: Hyphen Press, 2009); 
Gerd Arntz (1900-1988), the Neuraths developed the idea Otto Neurath, From Hieroglyphics to Isotype: A 
of the “typographic picture,” creating icon systems that resemble Visual Autobiography (London: Hyphen Press, 
alphabets. Isotype icons designed by Arntz. Gerd Arntz Web 2010). 


Archive, http://www.gerdarntz.org. Courtesy the Gerd 
Arntz Estate. © 2013 Artists Rights Society (ARS), New York / 
Pictoright Amsterdam. 


OUR PRIVATE LIVES This book of charts was designed by the Isotype 


Institute in 1944. The editor noted in the preface, “Some people, 


among them most intellectuals, have been conditioned to learn from 


texts and even tables of figures. But this is certainly not true of the 


majority of mankind and perhaps not even true of the majority of 


readers, who may still take things in more easily by sightseeing.” 
© 2013 Artists Rights Society (ARS), New York / Pictoright Amsterdam. 
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[Pe 6a) 
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at school or college steps down, But at the age 14 to 15 the stepping is much greater in Britain, 
and less than 10 per cent. continue education after seventeen. 


U.S. DEPARTMENT OF TRANSPORTATION SYMBOL SIGNS 
These standard icons, endorsed by the AIGA and the United States 
Department of Transportation, adorn signs and public spaces 


across America. Their blunt iconography continues to influence 


on-screen icons today. Although email applications make no 
use of paper envelopes and mobile voice functions have little in 
common with the phone receivers of the 1950s, icons of these 


familiar objects remain enduring players in our visual lexicon. 


Design: Roger Cook and Don Shanosky, 1974. 
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‘CASE STUDY 
NOUN PROJECT 


Launched in 2011 by designer/architect Edward Boatman and designer 

Scott Thomas, the Noun Project is a library of icons available for free on the 
website NounProject.org. The site is also a platform that accepts submissions 
from users. The project builds on the spirit of international cooperation and 
communication embodied by Isotype in the twentieth century. 


1 


6) @ Bis, 


COMMUN ITY HEALTH y 
ADVOCATE 


LEFT TO RIGHT: Community Health Advocate, 
Heart Healthy, Healthy Carry-Out, Community 
Health Activities, Virtual Supermarket/Pick-Up 
Site. Design: Edward Boatman, 2012. Sketches 
by Lauren Adams, Kacie Mills, and Briony Evans 
Hynson, 2012. 


HART HEALTHY 


ICONATHON AND ICON CAMPS In 2011 Code 
for America partnered with the Noun Project 

to offer Iconathons. Traveling through six U.S. 
cities, Noun Project founder Boatman conducted 
daylong workshops bringing together designers, 
civic leaders, and city staffers to design new 
urban symbols. In Baltimore a team of designers 
from MICA paired up with city leaders to create 
icons focusing on food, health, and community. 
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WAY FINDING FOR SCREEN 


Screen icons fall under two broad categories: user interface icons and 
application icons. User interface icons represent the tools and processes 
embodied in a device or software product, while application icons depict a 
piece of software that is for sale in an app store or installed on a user’s device. 
Application icons are similar to logos, constrained in the rounded square shield 
that has become a brand beacon of its own. 

User interface icons symbolize actions, such as go forward, go back, refresh, 
search, comment, and so on. Some symbols communicate intuitively, such as 
an arrow that relies on its innate graphic form to convey directionality. Most 
interface icons have tougher jobs to do, however, and many employ obscure 
metaphors and abstractions. You may ask yourself how a pattern resembling 
a cloverleaf highway became synonymous with “command,” or how a suitcase 
came to represent a bundle of fonts. Repeated over time, such connections 
become an entrenched digital slang. 


. a Le 
am 
4 +E 
8-BIT MASTERPIECES Designer Susan Kare created in 2001, Apple shifted to a glossy, jellybean aesthetic, 
the simple black-and-white icons that appeared on the causing many designers to look back fondly at those 
earliest Macs in the 1980s. Kare developed her first icons simpler, 8-bit times. Design: Susan Kare, 1983. Susan 
by filling in squares on sheets of finely gridded graph Kare Interface Graphics, http://kare.com; Susan Kare 


paper. With the introduction of the OSX operating system Limited Edition Prints, http://kareprints.com. 


Kee es, 


NX ZA 


READ MORE >> Jon Hicks, The Icon Handbook 
(Penarth, U.K.: Five Simple Steps, 2012). 


10S APPLICATION ICONS TOP: Monocle; WikiWeb by Friends of 
the Web; Hnegry by Michael Flarup, concept by Shiftedfrequency; 


Instagram by Cole Rise; Clear by RealMac Software Limited. BOTTOM: 


Flipboard by Marcos Weskamp; Apotheken by Stephane Reverdy; 


Twitter by Doug Bowman; Piictu; and Evernote by Gabe Campodonico. 


MAC OS APPLICATION ICONS TOP: Adobe InDesign CS6 by 
Tolleson Design; OSCulator by Wildora; Miro by Participatory 
Culture Foundation; Coda; Kaleidescope by Sofa. BOTTOM: 
Google Chrome; Firefox by Mozilla; Apple Safari; Spotify; Apple 
Launchpad. 


SIMILAR BUT DIFFERENT When designing an app for use on 
both iOS and Mac OS, it is best practice to design a related but 
distinct icon for use on each platform, as in these icons for the app 
Silkscreen: iOS on the left, Mac OS on the right. Design: Stephane 
Reverdy, 2012. 


S4dA109017 ONV SNODI \\ LEL 


N3duYIS NO ddA \\ ZEL 


ICONS AS TYPOGRAPHY 


Screen-based icons are delivered in several formats, including bitmaps, 
vectors, and fonts. Daggers, dingbats, and pointing hands have been part of 
the typographic vocabulary for centuries. Today symbol families resemble 
characters in a typeface, punctuating lines of text or enlivening a table, 
appearing side by side with letterforms. Although today’s display technologies 
have made colorful, detailed imagery commonplace, there remains strong 
support among designers and users for icons that are as flat and legible as 
letterforms, functioning as “typographic pictures” in the tradition of Isotype. 


MyAccount | Help 
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Community 38 = saves a : ater & 03 th ¢ 


My Account > 


Wanted Q a Help > 


Post to Classifieds 


PROVIDING CLUES This speculative redesign of the popular 


classified advertising site Craigslist employs simple icons to help 
users quickly find categories of listings. The icons, designed to ( \ 
a 


integrate with the typography of the page, aspire to the flatness — 
and clarity of letterforms. Design: Brian Pelsoh, 2012. Ne of 


MONDAY o MONDAY o 
1/03/14 1/03/14 
SCHENECTADY, NY, USA KRASNOYARSK, RUSSIA 


HOT OR COLD The icons in this prototype for 
a weather app resemble simple hieroglyphs. 
Design: Estelle Kline, 2013. 
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Pee es ieee 
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O@OOMGAZ RINT 2A-F$ HEVOOQOOQOOOOOH THEW YG 
OC@MOOMBOAZLOICKRT AF HEMOOQOOOOOOH THSEWITG 
COOSOMOAZLICN1T29FH¥EDOOOOOOCOK THEW 
COOSA GAZLOIYCKRI APE H¥EDOOOOOOOOKR THEW 
COOOHDAEZIVCEKRTIAVEH FUOOOOOOCOKR THEWTY 


ICONS AS FONTS The Greta Symbol font 
family contains more than twelve hundred 
characters, including arrows, pictograms, 
weather indicators, chess figurines, and more. 
While symbol fonts have a long history, Greta 


Symbol makes a new contribution by including 
most of its icons in ten weights, allowing them 
to integrate with text. Design: Peter Bil’ak, 
Typotheque, 2012. 


S4dAL09017 GNV SNODI \\ EEL 


N33uIS NO 3dAL \\ vEL 


CREATING AN APP ICON 


A bitten apple has no obvious link to computer equipment, yet this historic 
symbol of knowledge has become synonymous with digital innovation. Whether 
its imagery is literal or oblique, an app’s icon is an essential communication 
tool. The form of a well-designed icon should reflect the app’s function, convey 
an attitute about the product, and reflect what impression you want to give your 
users when they first encounter it. 


oa — 


KEEP IT SIMPLE A spare, direct app 
icon is easier for users to understand 
and remember than a highly detailed 
image. Represent your app with an 
image that directly or metaphorically 
represents the app’s function, or 
choose a memorable image that 
conveys the spirit of your product 
more obliquely. It is better to add 
detail and dimensionality to a simple 
image than to start with a dense 
design. 


—<~ 


TELL A STORY Just like a logo, an 
app icon can tell a story. Some icons 


must incorporate an existing logo 
or build on an established brand 
identity. When developing a new 
brand, you can let the app icon 
establish the tone for the entire 
program-—indeed, the app icon may 
be the brand's most frequently seen 
application. 


<> 
w 


AVOID LONG WORDS Typically, icons 
stand in place of words, objects, 
ideas, or operations. Sometimes 
words offer the simplest way to 
represent a complex function or 
product, but generally, icon designers 
look for imagery with more concrete 
points of reference. Long words are 
especially cumbersome. 


Icon Design: Emma Sherwood-Forbes, 2012. 


GRAB SOME ATTENTION Which app icons attract your 
interest? Designs that maximize an icon’s tiny real estate 
with bold graphic elements are especially memorable. 
Icons created in workshop led by Ellen Lupton for 

Grupo A, Sao Paulo. Design (from top left): Bruno Mello, 
Louise Novais, Marcos Zaidowicz, Raquel Castedo, 

Aline Maruyama, and Adriana Leao, 2012. 


CUSTOM GLOSS Developers can add Apple’s standard gloss 
effect to their icons when submitting their product to the app 
store, but why use Apple’s factory finish when you can give your 
icon its own custom shine? Follow these easy steps to add an 
alluring shimmer to your app icon. Play with the shapes and 
opacity of elements to control the outcome. 


ame 


STEP1 STEP 2 
Draw a 100 x 100px box with 
a corner radius of 20px. 


Reverse the stroke and fill. 


STEPS STEP 6 
Copy and paste in place; set 
an inner glow on the top layer. 
Opacity: 75%; Blur: 25px. 


Draw a white ellipse over 
the design. 


Tutorial: Noel Cunningham. 


READ MORE >> Michael Flarup, “iPhone App Icon Design: Best 
Practises,” Pixel Resort, http://www.pixelresort.com/blog/ 
iphone-app-icon-design-best-practises/; Kate McInnes, “Quick 
Tip: Creating Simple Icons with Adobe Illustrator, a Beginners 
Guide,” Vector Tuts+, http://vector.tutsplus.com/tutorials/tools- 
tips/quick-tip-creating-simple-icons-with-adobe-illustrator-a- 
beginners-guide/; “App Icons on iPad and iPhone,” iOS Developer 
Library, http://developer.apple.com/library/ios/#qa/qa1686/_ 
index.html. 


STEP 3 STEP 4 
Fill with a gradient and set 
the angle to 90°. 


STEP7 STEP 8 
Drop the opacity to an 
appropriate level. 


Choose two colors or more 
for your gradient. 


Add your logo, icon, 


monogram, or design and 
add a drop shadow to it. 
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SCALABILITY 


A desktop icon for Mac OS may be viewed as small as 16x 16px in a sidebar 
or as large as 1024x1024px in Apple’s flip-through “cover flow” interface. 
Creating scalable application icons thus demands attention to pixel-perfect 
detail. Doing it well requires making at least six different versions of the same 
icon for various display purposes. A Mae OS icon file (ICNS) consists of multiple 
image files at different sizes, each simplified according to its scale, with more 
detail possible at larger sizes. The ICNS format supports the following sizes: 
16x16, 32x32, 48x48, 128x128, 256x256, 512x512, and 1024x1024px. Begin 
drawing the icon at the largest size and work your way down to the smaller 
sizes, redrawing elements as needed. For the sidebar icon, you can eliminate 
the reference to a folder, as seen in the tiny 16px camera icon below. 


e - 
= 
{ = 
is ay 


128px 64px 32px 16px 
Scaled down Redrawnand —Redrawn for 
from 128px simplified use in sidebar 


Icon demonstration diagrams by Neven Mrgn, 2010 


512 x 512px 
iTunes artwork 


PRESTO CHANGE-O The logo for Presto draws inspiration from 
the instant connections it allows. It uses simple, rounded forms to 
reflect the friendly feeling of sharing content in a social network. 
Apple’s iOS requires icons in a multitude of sizes for various 
devices and presentation situations. Design: Rik Bracho, Face, 
“Presto,” 2012, http://www.designbyface.com/project/presto. 


114 x 114px 
Home screen icon for iPhone 
Retina Display 


72 x 72px 
Home screen icon for iPad 


p 


58 x 58px 
Spotlight and settings icon for 
iPhone Retina Display 


p 


57 x 57px 
App store and home screen 
icon for iPhone/iPod Touch 


p 


50 x 50px 
iPad Spotlight search results 


p 


29 x 29px 
Settings icon on iPad and iPhone, 
and spotlight icon on iPhone 
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‘CASE STUDY 
IMAGINARY APPS 


While creating a poster for an imaginary event has long been a staple project in 
design education, its twenty-first-century replacement may well be the 
imaginary app. Designing an app icon can be the starting point for imagining 
new and improbable uses of our digital devices. There are innumerable ways 
that apps could make our lives easier, more enjoyable, or simply more absurd. 

Creators of new apps often start by brainstorming novel ways to use the 
smartphone. A useful next step is to design icons to represent key ideas and 
then sketch out interfaces that explain how the apps would work. Such a 
process enables designers to begin building user experiences, develop 
branding in the digital environment, and present product concepts before 
constructing a fully functional prototype. 

Designer Brian Pelsoh explored cultural assumptions about gender and 
sexuality by designing a series of imaginary apps that can do everything from 
make things queer to tell you if someone is queer. As Pelsoh explains, “Cultural 
stereotypes serve to construct fixed, narrow categories of gender and sexuality. 
This project celebrates a more fluid understanding of identity.” Pelsoh’s abstract 


icons below synthesize these ideas. 
7 SS 


A QUEERIFIED IPHONE (Left to right) Gender Bender, 
Queerify, Nomophobe, Trans-L8R, HomoVision, GayDar, 


InstaQueer, and Queery. Developed for the exhibition 
The Imaginary App, curated by Svitlana Matvlyenko and 
Paul D. Miller. Design: Brian Pelsoh, 2013. 
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IMAGINING THE IMPOSSIBLE These two 
imaginary iPhone apps push the limit of 
reality and absurdity. With Gender Bender 
(above) a user is able to transform the 
gender of anyone they photograph. With 
Queery (right), the user is able to get 
answers to any question from a queer 
perspective. Design: Brian Pelsoh, 2013. 


) 


Well, when you loosen 
your grip on marriage 
and equal rights, we 


will loosen our grip on 
the rainbow. 
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ICONS FOR INTERACTION 


Icons play a key role in making a digital experience rich and guiding users 
through a complex web of screens and information. Tiny web favicons help us 
see what websites await in a seemingly endless array of open browser tabs. 
Simple pictograms can summarize information, making it faster and easier for 
users to anticipate what will happen when we click on something. They also 
help us scan navigation menus and decide where we want to go. Icons can save 
space and communicate broadly when written language is not universal. They 
can also draw attention to recent changes or important notifications. In the case 
of the infamous emoticons, they convey moods and intentions with just a few 
characters. 


fi 9 22 


A library of millions. Discover new music. Collect and share. 


Design: Rdio Design & Engineering Team, 2010 


+ Add Album + [? Share © Buy MP3s 
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HEALTH HEALTH 


EVENTS 


EVENTS 
EPISODES 
@ TUTORIALS 


Design: Brit + Co., 2012 


EPISODES 


ICONS COME IN 
THREE FLAVORS 


Design: Alexander Kahlkopf, 


PICTORIAL Some 
icons depict an object 


and its intended 
Iconmonstr, http:// 


iconmonstr.com, 2012. 


function, such as a 
camera for taking 
pictures. 


atl AT&T 4G 4:01 PM atl AT&T 4G 


po AIRPORTS 
—_— 


ana 


LISBON 


34° 


PREPARE FOR TAKEOFF The dramatic 
use of icons helps make this app for 
Portuguese airports enjoyable and 
memorable. Design: Joao Oliveira 
Simées, Innovagency, 2012. 


NO NEED FOR WORDS The home page 
for this British design studio uses icons 
to create a simple navigation system 
that reveals explanations of the icons 
only on mouseover. Design: Carbon 
Studio Ltd., 2012. Carbon Studio, http:// 
www.carbonstudio.co.uk. 
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4:01 PM 


> DEPARTURES 


19:50 Amsterdam 


TP € 


Geneva 


METAPHORICAL 
Examples of 
metaphors include 
using a lock for online 
security or a cloud for 
remote data storage. 


19:45 Milan, Linate 


20:10 London, Heathrow 


Milan, Malpensa 


o~ 


go 


ABSTRACT Some 
icons have an indirect 
meaning, but they 
become familiar with 
repetition and use over 
time. 


TRANSPORTS SERVICES 


PARKING 


CONTACTS SCHEDULES 
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‘CASE STUDY. 
NOT SO DISTANT RELATIVES 


Processing and Arduino are two related programming environments built with 
designers, artists, and makers in mind. The user interfaces for both are almost 
identical, and, until recently, the apps’ icons were similar as well. 

Processing is an open-source programming language; Arduino isa 
prototyping platform that enables artists and designers to build interactive 
objects and environments. In 2011 Arduino undertook a rebranding campaign 
to make its overall identity more distinct from Processing, while maintaining the 
functional familiarity of its core interface. 


> k 
CORT 


PROCESSING: APPLICATION AND INTERFACE 
ICONS Processing is a programming language 
based on Java, designed for artists, designers, 
and other creatives. Its simple, direct icons 
have influenced the design of other platforms, 
including Arduino. The app icon incorporates the 
commonly used “play” and “stop” symbols. 
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ARDUINO: APPLICATION AND INTERFACE 
ICONS Arduino’s design was influenced by the 
Processing platform that came before it. After 
the rebranding campaign, its application icon 
has become a full-blown logo, printed directly on 
products and packaging. 


BIOGRAPHY OF AN ICON Evolving from an overly 
complicated design to an almost identical look 
with Processing, Arduino’s icon was redesigned 
in 2011 to emphasize the platform’s own 
idenity. The current version of the logo uses 

the mathematical infinity symbol in place of a 
letterform, resulting in a more global mark. 


(CASE STUDY. 
LOGO, MEET NAVIGATION 


Kern and Burn is a cross-platform publication that presents the personal stories 
and perspectives of design entrepreneurs. The project began with the blog “100 
Days of Design Entrepreneurship,” a series of articles, interviews, and stories 
about self-driven design practices. Kern and Burn was published as a book 

in 2013. The site employs thematic icons for content areas (passion, hustle, 
perspective) as well as simpler interface icons (comment, bookmark, home). 
The logo badges and navigation icons form a visually coherent family. 


faa | DAYS l 
INTERFACE ICONS 


KERN ano BURN OUR BOOK ON KICKSTARTER ABOUT US 100 DAYS OF DESIGN ENTREPRENEURSHIP 
100 Challenging designers to follow their passions 
DAYS and choose their own paths. One day at a time. 


CONTENT BADGES 


Nagas = 


TODAY a DAY 72 ed I think that every business will succeed if 
Neen, “Se me the owner feels like there is no stopping it. 
. “ ‘ 

kek oe] ‘f es 


100 Days of Design 
Entrepreneurship 


Shares our inspiration and 
process for the book. Designers 
are working together to create 
products that make the world a 
better and more beautiful place 
Their energy is contagious. 


— PETEM BUCHAMAM-GHITH 


KERN AND BURN Website design: Tim Hoover and Jessica Karle Heltzel. 
Logo badges and navigation icon set: Eric Mortensen, 2012. 
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DRAWING INTERFACE ICONS 


Icons have become a major aspect of digital product design, branding, and 
user experience. Whether you are adding to or modifying an existing icon 

set or creating an entirely new family, drawing at such a small scale can be 
challenging. Start with clear metaphors or representational concepts for your 
icon and determine how much detail is achievable at each size of output. Set 
clear parameters to work with, such as stroke width, size, and color palette. 
Make use of modular elements when possible. 


DEFINE THE FUNCTION What is 
your icon for? Does it lead users to 
find their personal settings? Or does 
it help them broadcast a photo to 
the rest of the world? Is your icon 

an attention grabber, design detail, 
or visual guidepost? Decide where 

it will be displayed, and thus what 
size it should be. Is it a tiny favicon 
or part of a series of navigational 
elements? Think about your primary 
users and the languages they use. 
Design: Eric Mortensen, 2012. 


FIND A METAPHOR Often the 
hardest part of designing an icon 

is finding an appropriate metaphor 
to communicate its idea. Start by 
searching for existing conventions. 
A simple Google image search is 

a good place to begin, as are icon 
repositories like the Noun Project 
and Icon Finder. Usually, it doesn’t 
make sense to reinvent the wheel 
when it comes to interface icons; 
the more ubiquitous the metaphor, 
the easier it is for users to grasp. 
Add your touch through the 
representation of the metaphor. 
Design: Eric Mortensen, 2012. 


MIND MAP If a convention does not 
already exist, make a mind map. 

Put the action you are trying to 
represent in the middle, then branch 
out with every idea you can think of 
to visually represent it; use words 
and doodles to get all your ideas out. 
Mind map: Brian Pelsoh, 2012. 


EVALUATE YOUR IDEAS Witha 
critical lens, look at all of your ideas. 
Ask yourself the following questions 
about each concept: Is it easily 
recognizable? Does it have 
appropriate detail? Is there a risk of 
negative connotations? Is it visually 
appealing? Choose your best 
direction. 


145 \\ ICONS AND LOGOTYPES 
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LOGOTYPES 


A logotype seeks to express the name of a company or product in a 
memorable way. Although people broadly use the term “logotype” and the 
shortened form “logo” to include nonverbal brand marks, the Greek word logos 
means “word.” 

The rise of screen media has changed the way we think about visual 
branding, opening doors for a multiplicity of ways a logo can look, live, and 
behave. For most of the twentieth century, graphic designers focused 
primarily on print. Offset lithography, which required a separate plate for each 
of the colors in the CMYK printing process, often limited the designer to one 
or two colors because multicolor designs were expensive to reproduce. An 
aesthetic of simplicity and flatness influenced the form of modern logos for 
decades. Indeed, using special effects such as gradients and transparencies 
in logos used to be frowned upon and considered a telltale sign of weak and 
ineffectual design. 

In the early 1990s, new digital tools and processes made it easier 
to design and reproduce drop shadows, fine lines, transparency, and 
multiple colors, and the proliferation of screen devices overturned some 
of design’s most sacred truths. While a logo still needs to be readable, direct, 
and translatable across diverse media, it now occupies a visual world replete 
with color, dimensionality, detail, motion, and even sound. Designers now find 
themselves struggling to be clear, purposeful, and original while using a visual 
vocabulary that has shed its print-based constraints. 


THE DIMENSIONAL LOGO Logos that used to underscore the flatness of 
the page now shimmer with a strangely synthetic materiality. 


OO €. 


1940 2000 1976 2001 


MULTICOLOR 
NBC by Chermayeff & Geismar, MOHAWK by Michael Bierut, MOST by Mind Design, 2012. AOL by Wolff Olins, 2010 
1986 Pentagram, 2012 Client: Tom Dixon. 


SHADOWS, GRADIENTS, AND TRANSPARENCY 


mhenmer 


MILANO 
ALZHEIMER NEDERLAND OBAMA '08 by Sender LLC, 2007. EDP by Sagmeister and Walsh, EXPO MILANO by Andrea 
by Studio Dumbar, 2012 Creative Director: Sol Sender. 2011 Puppa, 2013 


Designers: Andy Keene and 
Amanda Gentry. 


FLEXIBLE 


DESIGN ACADEMY EINDHOVEN _ SECCA by Luke Hayman, OCAD by Bruce Mau Design, 2012 NYC by Wolff Olins, 2011 
by the Stone Twins, 2010 Pentagram, 2010 
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WORKING WITH COLOR 


There are several systems for identifying color accurately on screen, including 


hexadecimal, RGB, and RGBA, defined on the facing page. Designers choose 


and combine colors into attractive palettes based on the qualities of colors. 
Color harmonies are particular relationships among colors grouped around the 
color wheel; color palettes built around these common constellations generally 
feel balanced and complete. 

For decades, logos were reproduced primarily in black and white; even one 
additional color was a luxury. Today, however, color is dominant. Contemporary 
logos function primarily on screen, and full-color printing has become 
commonplace. While making sure a logo functions well in black and white is still 
an excellent test of the mark’s basic physical fitness, designers must consider 
every logo within the context of the company or organization it will represent 
and the range of uses it will have. A television station or an online business 
might find little need for a black-and-white logo. 


+You Search Images Maps Play YouTube News Gmail Drive Calendar More - 


Google 


~ 


Google Search —_—'m Fling Lucky 


Google employs consistent 
colors across its vastempireof  #0140CA #DD1812 #FCCAO3 #16A61E 


products. Design: UXA Google = 44/1 64,202) rgb (221, 24,18) rgb(252,202,3) rgb (22,166, 33) 


eee eters eeneee ba(1,64,202,1 ba(221,24,18,1 ba(252,202,3,1 ba(22,166,33,1 
Google logo are registered rgba(1,64,202,1) = rgba(221,24,18,1) rgba(252,202,3,1) rgba(22,166,33,1) 


trademarks of Google Inc., 
used with permission. 


COLOR HARMONIES 


OOO 


COMPLEMENT SPLIT ANALOGOUS TRIADIC SQUARE TETRADIC 
Two colors located COMPLEMENT Two or more Three colors Four colors Four colors in two 
opposite one One base color plus colors that sit spaced evenly spaced evenly complementary 
another on the two colors that sit next to each around the around the color pairs 
color wheel on either side of its other on the color color wheel wheel 

complement wheel Color diagrams: 


Jessie Dickey 


DIGITAL COLOR SYSTEMS 


HEXADECIMAL Specifying colors in 
HTML, the hexadecimal color system 
represents the percentages of 

R (red), G (green), and B (blue) that 
make up a color on screen with six 
digits. A hexidecimal color tag always 
starts with a pound (#) sign in HTML 
and CSS. Hexadecimal values can 

be generated in the Color Picker for 
Photoshop and Illustrator. 


RGB All colors on screen are rendered 
in mixtures of red, green, and blue 
light (R, G, and B). RGB is an additive 
system, meaning that these three 
colors combine in different ratios to 
create a broad range of colors. The 
value for each color is measured ona 
scale from 0 to 255. 


RGBA uses the same color system 
as RGB with the addition of alpha 
(Red Green Blue Alpha). Alpha 
values, measured on a scale of 0 

to 1, determine the transparency 

of a color. A color with O percent 

in its alpha channel is completely 
transparent (invisible), while a color 
with an alpha value of 100 percent is 
totally opaque. PNG images employ 
the alpha channel, allowing white to 
be transparent. 


RED 
HEXADECIMAL [ #f£0000 

RGB | rgb(255,0,0) 
RGBA | rgba(255,0,0,1) 


GREEN 

#O0f£00 
rgb(0,255,0) 
rgba(0,255,0,1) 


BLUE 
HOOOOfFE 
rgb(0,0,255) 
rgba(0,0,255,1) 


COMPARING ALPHA VALUES 


ee EE 


rgba(255, 0, 0, 1) rgba(255, 0, 0, 0.6) rgba(255, 0, 0, 0.2) 
rgba(255, 0, 0, 0.8) rgba(255, 0, 0, 0.4) rgba(255, 0, 0, 0.05) 
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ANIMATED LOGOTYPES 


Animated logos have appeared on television for decades, where they 
dramatize the identity of networks, local stations, and individual programs. 
Often appearing in short clips between commercials, animated logos for 
television can become stories in their own right, occupying center stage and 
accompanied by distinctive music and sound. 

Logos that move and change also play a role on websites. The animated 
identity system proposed by Natasha Jen for the cultural event Context/Out of 
Context, pictured below, conveys its own narrative and occupies considerable 
screen real estate. Most animated logos on the web require less space and use 
motion in quiet ways. A logo might cycle through one or two transformations 
and then come to rest, or it might change only on rollover, or when the screen 
is refreshed. Designers seek to balance the desire to attract the eye with the 
need to respect the reader’s focus on the site’s content. 


pe eevee e © cid : AR ies 
a 2 @ 2 8 2 @ 2 J i a ee 1 -®- 
eee *x- oe e ee eeoeee 
ee “x: eee . oe eee 
> . *x- ° . eee . é : ‘ 


CONTEXT/OUT OF CONTEXT 
This logo begins as a grid 

of dots. Over time, the grid 
becomes populated with 

the elements of the graphic 
identity. Design: Natasha Jen, 
2010. 


READ MORE >> Irene van 
Nes, Dynamic Identities: 
How to Create a Living Brand 
(Amsterdam: BIS Publishers, 
2012). 


‘CONTEXT. 
‘OUT. 0. F. 
‘CONTEXT. 


B-X LAB This identity features 7 


an invisible window that alters Vv ~e, 


the letters as they move behind 
it. Design: Luiz Ludwig and 


Javier Lopez, 2013. 


~Y~O®®e © 


BOROUGH BOROUGH BOROUGH BOROUGH BOROUGH BOROUGH 
FURNACE FURNACE FURNACE FURNACE FURNACE FURNACE 


BOROUGH FURNACE The logo for this website 
for a two-person design and prototyping 

In the pursuit of sustainable, small scale, studio was designed to change on mouseover. 
American manufacturing. The interior image changed, but the frame 
remained static. (The client later eliminated the 
interactivity.) Design: The Collaborative Works of 
Jeff & Paul, 2010. 


BOROUGH 
FURNACE 


Ne 


at the products page to view our beautiful cast iron cc 


detigne. 


CURRENT TV LOGO This logo for a 
progressive cable news channel appears to 
blow in the wind like a flag. Design: Wolff 
Olins with motion assistance by Ghava, 2011. 


Cunt 


S4dAL09017 GNV SNODJI \\LSL 


N33uIS NO AdAL \\ ZSL 


FLEXIBLE LOGOTYPES 


Flexible logos are designed to change and mutate in different contexts. 
Variables include shape, color, words, and images. Many contemporary identity 
programs consist of flexible rather than fixed elements that are arranged 

in a variety of configurations or continuously infused with new content. The 
challenge for the designer is to create a vocabulary of elements that hold 
together visually and remain strong and recognizable. 


TESS MANAGEMENT IDENTITY The identity 
for Tess Management is constructed from a set 


of art deco-inspired elements that combine 
in a modular way. Design: Mind Design in 
collaboration with Simon Egli, 2009. 


T 


U UU Ug 


choose. 


choose. 


choose. 


choose. 


U iU OU SY 


choose. 


choose. 


choose. 


Know What U Want. 


TEENS, SEX, & BALTIMORE 


24 teen voices. 
24 choices. 


at New Lens Media, 


Get ur free birth control in Baltimore City! 


choose. 


BALTIMORE CITY HEALTH DEPARTMENT, 
TEEN PREGNANCY PREVENTION CAMPAIGN 
This flexible identity was created by MICA design 
students in partnership with the Baltimore City 
Health Department. Letterforms adapted from 
type by House Industries’s online typesetting 


service, Photolettering.com. Designers: Lauren 
Adams, Noel Cunningham, Nicki Dlugash, Ben 
Peterson, and Javier Lopez, 2012. 


Cyt | / | 
AF F 3 ‘, 


oecarazi | 
sane, | 


1871 A stencil serves as a frame for changing 
content in this identity for 1877, an exhibition 
about the Great Chicago Fire of 1871. Design 
Agency: VSA Partners, 2012. Designer: Luke 
Galambos. Creative director/writer: Jonathan 
Turitz. CEO/ECD: Dana Arnett. 
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GENERATIVE LOGOTYPES 


Generative logotypes employ rule-based algorithms to produce variations 


on an underlying form. A generative logo might potentially produce infinite 
versions. This experimental method of logo design is often used to emulate or 
demonstrate the thought process associated with institutions engaged with 
science and technology. The identity system created for MIT Media Lab in 2011 
allows every member of the organization—faculty, staff, and student—to have 
a unique logo. The identity aims to express the collaborative nature of Media 
Lab’s work while its design strategy matches the institute’s experimental 
outlook. Custom animation software allows each member to add unique 
animations to the many videos produced by Media Lab. Creating all those 
manually would be unmanageable, so instead a system is set up and given 
some rules (color sets and a grid in this case), which can generate 

an infinite number of individual logos. 


MIT MEDIA LAB MIT MEDIA LAB MIT MEDIA LAB MIT MEDIA LAB 


MIT MEDIA LAB MIT MEDIA LAB MIT MEDIA LAB MIT MEDIA LAB 


Pas 


ma 


MIT MEDIA LAB MIT MEDIA LAB MIT MEDIA LAB MIT MEDIA LAB 


MIT MEDIA LAB LOGO The designers devised an 
algorithm to generate endless variations of the MIT 
Media Lab logo. Design: Richard The, E. Roon Kang, 
and the Green Eyl, 2011. 


EXPLORATORIUM: CONCEPT 
LOGO This animated logo grows 
and changes like a living thing. 


Design: Paul Hoppe, 2011. 


EPFL ALUMNI This identity system for the alumni 
association of an esteemed Swiss university (EPFL) has 
thousands of logo variants. The curves are paths connecting 
an underlying grid of dots, suggesting a network of 
relationships among people. Recalling subway maps, the 
marks suggest the different roads that students take after 
graduating. Design: Enigma, 2012. 
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SCALABLE VECTOR GRAPHICS 


Scalable vector graphics (SVG) bring the flexibility of the vector to the web. 


Like other vector file formats (such as ai and eps), SVGs are infinitely scalable. 
The difference between SVGs and ai or eps files is that the XML source code 
renders the SVG file directly in a browser. Simply copy the code, place it in 
your HTML file, and your browser does the rest. The SVG will be crisp at any 
size or resolution; it won’t look blurry on a Retina screen, and users can zoom 
in without compromising the graphic’s clarity. SVGs can also be searched, 
indexed, and printed. The code for SVGs, which are becoming a favorite format 
for logos on the web and mobile devices, is output by Adobe Illustrator when 
you save a file as SVG code. 


HTMLS5 LOGO This intricate illustrative logo can 
be rendered completely in the browser with the 
SVG code shown to the right; no <img> tags 
are necessary. Design: Michael Nieling, Ocupop, 
2011. 


READ MORE >> The World Wide Web 
Consortium, “Scalable Vector Graphics,” W3C, 
http://www.w3.org/Graphics/SVG. 


<svg xmlns="http://www.w3.org/2000/svg” viewBox="0 0 512 512”> 
<title>HTML5 Logo</title> 


<polygon fil 


<polygon fil 


<polygon fil 


7V-23.12h-21 


4h-22.982V3 


Ll="#E44D26" points="107.644,470.877 


74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 


L1l="#F16529" points="256,480.523 376.03,447.246 


404.27,130.894 256,130.894 "/> 

<polygon fill="#EBEBEB” points="256,268.217 195.91,268.217 
91.76,221.716 256,221.716 256,176.305 255.843,176.305 
42.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/> 


Ll="#EBEBEB” points="256,386.153 255.801,386.206 


205.227,372.55 201.994,336.333 177.419,336.333 
156.409, 336.333 162.771,407.634 255.791,433.457 256,433.399"/> 
<path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.5 


.11v23.12h-23.077V0z"/> 


<path d="M205.994,22.896h-20.316VOh63.72v22.896h- 
20.325v46.148h-23.078V22.896z"/> 
<path d="M259.511,0h24.063114.802,24.26L313.163,0h24.072v69.0 


4.8221-15.877,24.549h-0.3971-15.888 


4.549v34.222h-22.58V0z"/> 
<path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/> 
<polygon fill="#FFFFFF” points="255.843,268.217 


255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 
255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 
361.399,268.217 349.162,268.217"/> 

<polygon fill="#FFFFFF” points="255.843,176.305 
255.843,204.509 255.843,221.605 255.843,221.716 


365.385,221.716 


365.385,221.716 365.531,221.716 366.442,211.509 
368.511,188.488 369.597,176.305"/> 


</SVg> 


SVG VS. PNG VS. JPG Each of these file types has its place. JPGs are great for 
photos, and PNGs provide transparency, but vector-based graphics such as 
letterforms and logos work best as SVGs. Below is a comparison of the rendering 
quality of the same image saved as an SVG, PNG, and JPEG. Judge for yourself! 


IDEAL RENDERING SIZE RETINA DISPLAY 400 PERCENT 


800 PERCENT 


GETTING THE CODE 

In Adobe Illustrator, save your 
file as an SVG from the “Save 
as” menu; at the bottom of 
the dialog box, click on “SVG 
code” and copy the content 
into a TXT file. Then paste the 
code into your HTML file. 
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‘CASE STUDY 
MFA BRANDING 


This dynamic logotype was designed to promote a series of interdisciplinary 
MFA thesis exhibitions held at MICA. The logo is based on sixteen permutations 
of the letters /, F, and A. These varied custom letterforms symbolize the 
school’s range of interdisciplinary study (painting, photography, design, 
illustration, digital media, and more). Each character was created collaboratively 
by three designers, who took turns adding their touches to the grids, lines, and 
warped planes that make up these distinctive shapes. On screen the logo flips 
through all of the available characters like a slot machine. The simple black- 
and-white color palette is accented by flashes of neon green. 


Schedule Map Sort Artists 


ONE 

March 29-April 14 
Two 

April 19-May 10 


THESIS 
2013 


INTERDISCIPLINARY LETTERFORMS Three designers played 
musical chairs, each taking a hand in creating the sixteen 
letterforms featured in this dynamic identity for MICA’s MFA 
thesis exhibitions. Design: Brian Pelsoh, Javier Lopez, and Kelcey 
Towell, 2013. 


ONE ONE ONE 
March 29-April 14 March 29-April 14 March 29-April 14 


Two Two TWO 
April 19-May 10 April 19-May 10 April 19-May 10 


MFA FA TA\Fe 


THESIS 
2013 


me sabes seme | map| 
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MR 
AA 333 


‘CASE STUDY 
BRANDING A METROPOLIS 


In their entry for an urban design competition, a team of designers from MICA 
set out to create a visual identity for Lille Métropole, an urban area in Northern 
France. The team’s goal was to represent Lille’s history and future in a rich 
visual system that could function both locally and globally. 

Lille Métropole is a diverse area consisting of many member districts 
and several large cities. The region has joined together in an effort to create 
a “city of the future,” a metropolis with high standards for social, economic, 
and ecological well-being. The designers aimed to communicate the idea of 
a unified, integrated region while honoring the unique qualities of the various 
locations. Each member community is an integral part of the greater whole, and 
the visual system reflects this. 

The brand includes design elements that symbolize each member city within 
Lille Métropole and combine to represent the broader region. The elements are 
based on defining characteristics of each district: circles for Lille, the capital 
city; diagonals for Roubaix’s water and its many pools; x’s for Wasquehal’s 
heavy industry and manufacturing; and grids for Tourcoing, the heart of the 
textile industry. The proposed system is expressed across various media, from 
environmental signage to mobile apps. 


@ Lille 


ER a "i Tourcoing 


NRW RRS 
@ris) Raye 
ABM BX 

ME RR IC 


xx ; 
XEKK xx Wasquehal Lille Métropole Wasquehal 


INN 


bt tat 43 
XXX 
NV AAAA 
AAA 
wary 
wee bh 


BASE SYSTEM The visual system is based on a set of patterns 
derived from each district's unique identity. These elements 


AA . combine to represent the metropolis as a whole, or they can be 
rA Rouba IX used separately for each district. Design: Richard Blake, Emma 


Sherwood-Forbes, Nour Tabet, and Yingxi Zhou, 2013. 


FESTIVAL 


HS mi >> & 


APPLICATIONS The identity system can be used both as a set of 
patterns for large-scale implementation and as a single mark to 
stand alone. The visual language does not simply live and die on 
official letterheads or envelopes. It is present in day-to-day life, as 
taken in by business travelers stepping off the train or residents 
doing their grocery shopping. 


Lille 93 = 


Metropole 
TEXTILE re 


mn 


ae 


a 


Découvrir Lille 


(MUSECS ET MONUMENTS 


PARCS ET JAROINS 
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IN THE CLASSROOM: ICONS 
WITH ELLEN LUPTON 


Students in Lupton’s Graphic Design | course at MICA designed icon families 
built from bits and pieces of a square. They began by dissecting a series of 
squares with straight lines, and then used these diagrams to create shapes 
for building simple images. The project demanded thinking about constraints, 
modularity, consistency, abstraction, and simplicity, and challenged students to 
construct drawings using shapes instead of lines—a shift in method for many 
participants. Students also sought to express their individual points of view 
through their quirky choices of subject matter. 


= 
| Oe 


OFFICE SUPPLIES These clever drawings depict a range of 
everyday office supplies (including the mental fuel contained in a 
cup of coffee). The scissors proved especially challenging. 


Design: Wendy Du, 2009. 
BOTTLES These elegant icons for familiar bottle types line up to 
become a stark commercial still life. Design: Emi MacLeod, 2009. 


AMISH ICONS Simple forms combine to represent a simple life 


in these icons depicting the customs of the Amish people. 
Design: Ben Sifel, 2009. 
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BRIAN PELSOH Kinetic type saturates screens of all types and sizes and across all 
JINHWAN KIM __ digital platforms, from phones to computer screens to jumbotrons. 
NICK] DLUGASH = Motion enlivens typography by adding complexity and dimension to 

CAMERON ZOTTER flat letterforms. We’ve come to expect type to move and change in 
title sequences for film and television and on the flashing screens 
of Times Square, pitching the latest gadgets and news. Animated 
text appears in more subtle ways in digital interfaces. Triggered 
by a simple touch, type moves as we open applications on our 
smartphones or click on a menu on a website. 

Animated typography is not a new phenomenon. Saul Bass 
pioneered the medium more than fifty years ago with his innovative 
title sequences for Alfred Hitchcock films. While Bass was able to 
produce stunning effects with limited means, today’s advanced 
soft- and hardware have made the process of animating letters 
more accessible than ever. Ranging from simple to sophisticated, 
animation effects have become integral to such commonplace 
tools as Powerpoint, Keynote, InDesign, and HTMLS5. An animated 
GIF (Graphic Interchange Format), the simplest form of web-based 
animation, can be produced entirely with Photoshop. 

Typography is not inherently kinetic. Most letterforms are 
designed to be static, frontal, and upright. Motion allows type 
to grow, shift, transform, shrink, and stretch across time and 
space. Working with so many parameters can be overwhelming. 
But by storyboarding a concept and focusing on a few basic 
transformations, designers can plan and produce animations that 
add meaning and purpose to a project instead of stirring up a 
maelstrom of arbitrary effects. 

In addition to transforming text through carefully controlled 
animation techniques, today’s designers are using code to produce 
unexpected forms. Experimenting with programming tools such 
as Processing, Paper.js, and Nodebox, designers create generative 
systems that construct complex letterforms and texts that behave 
like living or mechanical organisms. 


TENDRIL This experimental web browser builds typographic “sculptures” 
based on the text of a website. The first page of the site is represented by 
a three-dimensional column. Clicking on highlighted links causes additional 
columns to grow from the core, yielding strange biomorphic landscapes. 
Design: Ben Fry, 2000. 
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THE ALPHABET OF NATIONS Created with the band They Might 
Be Giants (John Flansburgh and John Linnell), this video presents 
kids with an alphabet of geographic locations. The project was 
designed by Emily Oberman and her team at Pentagram, who 
produced a layered landscape of letterforms that plays with 


space in two and three dimensions. The typographic maps are 
mixed with crowd-sourced imagery, supplied by TMBG fans from 
around the world via Twitter and Tumblr. The video was made to 
benefit the Global Fund for Children, an international charity. Design: 
Pentagram, 2012. 


BASIC ANIMATIONS 


In any time-based design—from a complex title sequence to a simple Keynote 
presentation—there are numerous possibilties for text to arrive on screen. It 
can fade in, fade out, drop down, or simply appear on a blank canvas. It can 
emerge all at once, word by word, or letter by letter. Type can change in opacity 
to appear or disappear, or the background can shift to reveal or conceal what is 
printed on top of it. 


TYPE ON SCREEN 


MORE BASIC ANIMATIONS 


TYPE ON SCR TYPE ON SCREEN 


TYPE ON SCREEN 


TYPE ONS’ TYPE ON SCREEN 


COMBINED TECHNIQUES 


Although animation can be highly abstract, designers often use motion to 
imitate movements and behaviors observed in the physical world. As projects 
build in complexity, they manipulate multiple parameters to create text that 
appears to inhabit a dynamic, three-dimensional universe. 


YPE 
ON —_beREEN 


TYPE WSS Sows 


TYPE 


ON *s! 


SCREEL/V 


The use of lighting, texture, transparency, and photographic imagery makes 
typography come to life, as if the text were performing on a physical stage. 
Type becomes a character in a living drama as the realms of analog and digital 
expression converge. 


Ta? SRR EARS. 


li 
t 
ju 


OUT OF YOUR LEAGUE This animated music video emulates cut LET ME LIVE Three-dimensional text drifts in space, 
paper layered in a shadow box. Design: Jamie Carusi, 2013. perpendicular to a printed page. Design: David Lam, 2013. 
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ANIMATED GIFS 


The animated GIF is one of the oldest animation formats for the web. 
Introduced by CompuServe in 1987, it consists of a series of single-image 
frames that play in sequence, often in a loop, to form an animation. This crude 
technology polluted the Internet during the 1990s, when animated GIFs popped 
up everywhere in the form of flashing flames and “under construction” signs. 
The Web 2.0 gradient craze of the early 2000s left the animated GIF for dead, 
but designers and photographers recently resurrected this trusty format, finding 
new ways to exploit its technical simplicity and retro charm. In a few short 
frames, a GIF creates moving images for display on any device. 


GRAFFITI MEETS GIF British artist Insa creates animations from 
photographs of his street art by manipulating the stripes in the 
photograph. Design: Insa, 2011. 


BRAND NEW STARTS In this typographic animation, the numbers 
dissolve in a clockwise wipe, then reappear. Design: Jason Wong, 
Friends of Type, 2012. 


WHOLE LOTTA LUV FOR YA Just like a moving neon sign, in 
which tubes turn off and on in a predetermined sequence to create 
the illusion of motion, an animated GIF flips through a loop of still 
frames. Design: Erik Marinovich, Friends of Type, 2011. 


WAVERING A The flicker of a computer screen is animated over 
several frames in this eerie GIF. Designer unknown. 
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IN THE CLASSROOM: ANIMATED GIFS 
WITH BRIAN PELSOH 


Animated GIFs offer students a simple and accessible introduction to motion 
graphics. Students in Pelsoh’s typography course at MICA developed logos and 
animated concepts to promote imaginary film festivals. These animated GIFs 
were built entirely in Photoshop. The designs can be placed directly within an 
HTML page, requiring no additional players or software. 


THE SCHOOL UNIFORM A patchwork of shields 
emblazoned with a movie camera zooms closer 
and closer, revealing the name and location of 
this film festival. Design: Cindy Hsu, 2012. 


4 N x 


a 
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SKATEBOARDING SKATEBOARDING SKATEBOARDING JUNE 2013 
VIDEO FESTIVAL VIDEO FESTIVAL VIDEO FESTIVAL BALTIMORE CITY 


SKATEBOARDING VIDEO FESTIVAL The acronym SVF zooms into the 


center of the viewfinder, like a skateboard. Design: Brian Ahola, 2012. 


FILMS IN TRANSIT The logo rushes from the left edge of the frame to 
the right and then drops down, mimicking the movement of a bus or 
train. Design: Carolyn Hampe, 2012. 


Atl 


EPL wi Me “AfetS 


BACK TO THE 90’S Stacked type in colors reminiscent of the 1990s 
falls into place, before the festival logo rewinds to the center of the 


page. Design: Morgan Frazier, 2012. 


WASHINGTON DC FILM FESTIVAL 


POLITICAL SATIRE In this brand campaign for a political film festival, 
a large protruding point reveals itself to be the tip of the Washington 


Monument. Design: Jamie Carusi, 2012. 
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STORYBOARDING 


A Storyboard is a series of sketches showing the primary structure and 
movements of an animation or interaction. Designers create these rough stills in 
pre-production in order to quickly develop and communicate a narrative. Much 
like layout thumbnails for a magazine, storyboards serve to visualize, plan, and 
explain a sequential narrative. 

A storyboard is a practical tool and need not be a thing of beauty. Typically 
it consists of a series of hand-drawn frames accompanied by lined spaces 
for written directions. These verbal notes describe camera motions, sound 
elements, voice-overs, user interactions, and other important elements of the 
design and concept. Storyboards can also be drawn digitally. 


[ preeeey Saere 
Where is the nencest How many gallons 
Are e¢ Ore in a liter? 
pate te SE lo 


ee ee 


STORYBOARDS FOR INTERACTION Storyboards are useful tools for 
planning product interfaces, games, apps, and other interactive media. 
A storyboard describes a typical set of actions, showing how elements 
will change and respond to user input. Shown here is a storyboard 

for an app, showing the start screen and a sequence of interactions. 
Design: Brian Pelsoh, 2013. 
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STARTING WITH A PLAN In this storyboard for an animated 
narrative, small diagrams indicate the movement of type and 
other elements on the screen, allowing the designer to quickly 
envision the entire project and understand the work required to 
complete it. Design: Kelcey Towell, 2012. 
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NARRATIVE TECHNIQUES 


Aristotle described a story as “a whole action of a certain magnitude.” What 
makes a story feel whole and complete? Words and images bopping aimlessly 
around a screen don’t add up to a fulfilling experience for viewers. Movement 
on screen should feel purposeful. Like a story, it should have a beginning, 
middle, and end; it should convey from the outset that the motion is heading 
somewhere and deliver a satisfying sense of closure. A fully developed story 
follows an arc, from a set of initial conditions to a problem or conflict to a final 
resolution. Similarly, a successful animation consists of sequences of changes 
in scale, position, or color that work together to convey whole actions. 


ANALOG MEETS DIGITAL This animation combines hand-drawn READ MORE >> On definitions of narrative, 
lettering and multiple animation principles to illustrate the story see John Barth, Final Fridays (Berkeley, CA: 
of a young boy confronting his fears. Design: Kelcey Towell. Story: Counterpoint Press, 2012). 


Corey Bradbury, 2012. 
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SCALE CHANGE Animation software allows the designer to change the position 
of the viewer/camera or add motion to graphic elements such as text, layers, or 
shapes. Here, the camera zooms out to create a shifting sense of scale. 
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APPEARANCE OF DEPTH Shifts in scale can be used to imply depth on a two- 
dimensional surface. The white lettering shrinks into the counterform of an 
enormous O, which then reveals itself to be part of the word “sloth.” 


ANIMATING FILL Any graphic element can be animated. Here, the fill inside 
the letters changes over time, giving the impression of a volume that is filling 
up with liquid. 


a, | | 
jACcoB FOUGHT: 


EMPHASIS Various words are knocked out of moving shapes in order to create 


emphasis. “Fought” appears out of the shape of a moving fist, drawing attention to 
this word. 


HE 
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TRANSITIONS: GETTING FROM ATOB 


Animation is often used to transition between two states. The in-between state 
is where the action occurs. Some may scoff at the standard transitions we have 
inherited from filmmaking, such as swipes and fades, but often the more basic a 
transition is, the more effective it is. Following are some simple and some more 
complex ways to animate the transition between two frames of information. 
These techniques can be used in websites, slideshows, or motion graphics. 


IN 
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ANALOG PIXELS This common 
construction sign can display 
a maximum of twenty-four 
characters, eight characters 
in each of three rows. Each 
character is formed by a 
combination of thirty-five 
available pixels, which are 
either on or off. The images 
here were captured in less than 
two seconds. Photos: Jinhwan 


Kim, 2012. 


CASE STUDY 


TRANSITIONS ON THE STREET 


On the street, everything is moving, including signs. Traffic signs flicker and 
restaurant signs flash, all vying for our limited attention. The ubiquitous road 
construction sign shown here is made from square units that become green 
when open and black when closed. Each segment changes at a different speed, 
a simple system that creates surprisingly interesting transitions. 


‘CASE STUDY 
LOGO TRANSITION 
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Designed by Jinhwan Kim, this animated logotype for a website about future 
technologies employs images of six-sided cubes, one for each character of the 
title. The cubes are programmed to rotate randomly yet always spell out the text 
“function beyond form.” 
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FUNCTION BEYOND FORM 
Design: Jinhwan Kim, 2012. 
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‘CASE STUDY 
PIXEL PAINTING TYPOGRAPHY 


Inspired by Dentsu London’s iPad Light Painting, Jinhwan Kim and Cameron 
Zotter experimented with motion and typography. They created a video in 
which Akzidenz-Grotesk letterforms scroll across the frame, partially obscured. 
Moving an iPod Touch back and forth and up and down, they countered the 
motion of the videos. A long-exposure photograph of the moving, handheld 
iPod screen produced an interesting image of each letter. 


r 
PIXEL PAINTING TYPOGRAPHY WITH IPOD Design: Jinhwan Kim 1 : 
and Cameron Zotter, http://vimeo.com/20678911, 2011. ee 


KIXEL: A KINETIC ALPHABET 


Kixel is a collection of kinetic letterform experiments, one for each letter of the 
alphabet, designed by Jackie Littman. The series explores the construction and 
deconstruction of form through a variety of animation techniques, including 
stop motion, digital effects, and animated GIFs. Each animation is based on a 
modular unit, from paper to pixels to peppermints. 


= 


STOP MOTION B Red Tic Tac candies are placed on 
a sheet of paper, one at a time, to create the form 
of a letter B. Design: Jackie Littman, 2012. 
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TYPE AND CODE 


Programming is no longer the exclusive domain of software engineers or 
computer nerds. Many designers are writing their own programs in order to 
avoid or augment the standardized features of commercial software. Some are 
creating whole new software tools or programs, while others are using code as 
a means within the design process to open up unexpected visual possibilities. 

By systematically playing with variables, inputs, and conditions, designers 
can achieve unplanned results and generate complex forms. Automating 
basic processes allows designers to produce rapid iterations that would be 
prohibitively time-consuming to implement manually. 

Writing code can provide a way to reintroduce tangible human qualities 
to digital work by enabling the translation of human input into visual output. 

In the same way that handwriting reveals much about an author’s process, 
style, and frame of mind, so too can code-generated type reflect and record 

the designer’s process. Designers can personalize or humanize typography’s 
formal perfection by introducing natural movements, patterns, and irregularities. 
Code allows them to apply controlled randomness to form making, disrupting 
the regularity of digital type without compromising its structural integrity. 

The projects and processes introduced on the following pages indicate the 
range of ways that code can be applied to text- and letterform-based projects, 
including static compositions, animated works, interactive programs, and 
physical objects and systems. 


LIMITLESS EFFECTS 
Creating the appearance of 
oozing and dripping text 
would be a tedious task 

in standard applications 
sych as Photoshop or 
Illustrator, but with 
programming languages 
such as Processing, 
designers can render such 
effects relatively quickly. 
Design: Reza Ali, 2012. 
Reza Ali, “Generative Type 
Experiments,” REZA (blog), 
January 15, 2012, http:// 
www.syedrezaali.com/ 
blog/?p=2007. 


Community Language 
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Environment Libraries 


PROGRAMMING IS MORE THAN CODE A program is a set of 
instructions that allows a computer to carry out a specific 
task. The components of programming include the programming 
language itself; an environment in which to write and test code; 
libraries containing code and data that extend the function of a 
program; and a community of users who share and build upon one 
another's work. A handful of powerful tools for visual designers 
and artists have been designed to aid the creative process. 


Diagram: Nicki Dlugash. 


EXPLORING THE MEDIUM Investigating the creative potential 

of the computer programming language Processing in relation to 
typography, Yeohyun Ahn has constructured letterforms using 
the Geomerative Library, developed by Ricard Marxer Pifién, and 
the Binary Tree Algorithm. Design: Yeohyun Ahn, 2008-10, http:// 
www.yeoahn.com/hp/typography.html. 


PROGRAMMING TOOLS FOR DESIGNERS 


PROCESSING is a Java-based, open-source 
programming language and environment created 
by Ben Fry and Casey Edwin Barker Reas. Designed 
for producing images, animations, and interactions, 
Processing has attracted a large user community 
and supports a robust library of preexisting scripts. 
The basics of Processing can be grasped by people 
with minimal programming background. 


SCRIPTOGRAPHER, a scripting plug-in for 

Adobe Illustrator, was developed by Jiirg Lehni in 
2001; Jonathan Puckey joined this open-source 
endeavor in 2007. A community of users has shared 
numerous plug-ins, including drawing tools, filters 
for modifying existing graphics, and scripts for 
generating complex graphic objects. Scriptographer, 
which can create lines and patterns that change 
each time the script is run, is not supported by 
Adobe CS6. 


PAPER.JS, also created by Lehni and Puckey, 

is the heir to Scriptographer. Paper.js provides 
fine-grained tools for creating, inspecting, and 
manipulating vector graphics down to the level of 
points, handles, tangents, and curvature, building 
on top of the HTMLS canvas. Largely compatible 
with Scriptographer, Paper.js brings a print-oriented 
graphics mentality to the web, adding capabilities 
for interactivity and animation. 


NODEBOXxX is an open-source tool that enables 
designers to create generative projects, automate 
boring production challenges, visualize large sets 
of data, and access the raw power of the computer 
without thinking in ones and zeroes. Nodebox 
integrates with traditional design applications and 
runs on many platforms. 


CINDER, across-platform programming tool 
created for use with graphics, audio, video, 
networking, and computational geometry, exploits 
the native capabilities of diverse platforms, 
including Mac OSX, Windows, and iOS. It upgrades 
automatically with the operating system. 
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PROCESSING IN USE 


SOLAR is an audio visualizer 
consisting of particles that 
pick up specific frequencies of 
incoming audio. The particles 
get larger and more aggressive 
in relation to the amplitude 

of the audio input. Design: 
Robert Hodgin, 2008, http:// 
roberthodgin.com/solar/. 


BROKEN GRID These letterforms are made completely without 
the use of Bézier curves, resulting in radical, highly abstract 
characters. Design: Nils Holland-Cunz, “Broken Grid - Nils Holland- 
Cunz,” Generative Typografie, http://generative-typografie.de/ 
generativetypografie/broken-grid/. 


DISARTICULATE This beautiful piece created by Ben Fry, co- 
creator of Processing, visualizes the action of a computer program 
by generating blue lines connecting lines of code as they run. This 
image shows one moment in time; the darker lines represent 
recently run code, while the lighter lines represent code that took 
place farther in the past. Design: Ben Fry, 2008, http://benfry. 
com/disarticulate/. 


DOT-MATRIX IN THE TWENTY-FIRST CENTURY Coded with 
Processing, this generative monospace alphabet was created by 
overlaying circles of differing sizes. Design: Tatevik Aghabayan, 
Elien, 2008, http://elien.tatssachen.de/. 
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SCRIPTOGRAPHER IN USE 
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LETTERING TOOL Using Scriptographer, Puckey created a drawing tool that 
allows the user to modify the strokes of individual letters from a custom-designed 
typeface. The application shown above comes from the cover of Jetzt/Now, 
commissioned by Luna Maurer. Design: Jonathan Puckey, Moniker, 2005. Jonathan 
Puckey, “Lettering Tool,” http://jonathanpuckey.com/projects/lettering-tool/. 
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YOU ARE HERE Hektor is a drawing device that 
produces large-scale wall drawings with spray 
paint. The can floats in front of the wall ina 
constant struggle with gravity, suspended only 
by two strings, requiring it to move on smooth 
paths. Shown here is a design for signage 
created for the exhibition You Are Here: The 
Design of Information at the Design Museum 
London in 2005. The image depicts the motion 
diagram that the Hektor software (written in 
Scriptographer) generates in order to move the 
spray can smoothly over the wall. Hektor was 
created by Jiirg Lehni and Uli Franke in 2002. 
Signage designed by Laurent Benner, Jonathan 
Hares, and Jiirg Lehni. 


AFTERNOW Lehni used 
Scriptographer to produce this 
three-dimensional typography, 
inspired by the three- 
dimensional lettering on the 
1973 record sleeve The Faust 
Tapes. Design: Jiirg Lehni, 
2006, Scriptographer, http:// 
scriptographer.org/gallery/ 
afternow/. 


FONT RHYTHM This custom 
script for Scriptographer 
allows users to manipulate 
the scale, baseline, rotation, 


in atext. Design: Guillaume 
Chabot, Vincent Delaleu, Hugo 
Hoppmann, and Olga Prader, 
2010. Workshop with Jiirg 
Lehni and Jonathan Puckey, 
ECAL (Ecole cantonale d’art de 
Lausanne ), 2010. 
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MODIFYING CODE 


Experts as well as novices learn new programming techniques by studying 
code written by other programmers. Armed with a basic understanding of how 
code works, designers can look for variables and change their values, observing 
how each change alters the results. They can also experiment by temporarily 
disabling some lines of code, setting them off as comments (“commenting 
out”), and exploring how the missing lines affect the code. 

As designers become more skilled, they can modify code in more ambitious 
ways, including combining elements from several different sources into new 
pieces of software. This is best done slowly and methodically; the new chunks 
of code should be tested a few lines at a time as they are incorporated. Bringing 
in too much material at once yields what programmers call “Frankenstein 
code”—a malfunctioning mishmash that is difficult to repair. 

Whenever modifying or otherwise incorporating someone else’s code, the 
designer must credit the originators of the source code within the new code 
and preserve any copyright notices and other information the authors have 
included. Explaining what you did with comments of your own can help inspire 
other designers down the road. The best way to learn about code is to get 
inside and play with what's there. 
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GETTING STARTED WITH CODE Designer Qian Li began by 
exploring the type tutorials available on Processing.org. By making 
a few changes to the code, she was able to create this sketch of 
text waving like a flag. Design: Qian Li, 2012. 


SMALL DIFFERENCES, BIG CHANGES By experimenting with single 
lines of code in Processing—for example, changing “bezier” to “line” 
or changing “ellipse” to “ellipse with stroke”—designer Yeohyun Ahn 
generated vastly different letterforms. Design: Yeohyun Ahn, 2008, 
using the Geomerative Library by Ricard Marxer Pifién. 
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HILOS Created with Processing, this piece is based on the 
idea of particles swimming along the characters’ outlines. 
The position of the mouse controls the parameters; clicking 
on the text will rerun the program with a new set of random 


colors. Design: Ricard Marxer Pifién. 


HILOS MODIFIED By making changes in Pifidn’s code, 
designer Qian Li was able to customize the effect, instilling 
greater control over the colors and the speed at which 


particles move around the letterforms. 


THIS WALL SPACE 
1S DEDICATED 
TOTHOSE 

WHO INSPIRED 
THIS PROJECT, 
KNOWINGLY OR 
UNKNOWINGLY. 


DIGITAL COLLAGE Working 
with Scriptographer, the 
designer pieced together 
code from multiple sources, 
including rasterColor.js by Jiirg 
Lehni, sketchStructs.js by Jay 
Weeks, and Carsten Nicolai’s 
Vector Grid File. Design: Nicki 
Dlugash, 2012. 
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COMPUTATIONAL TYPE 


Designer Kyuha Shim became interested in the ability of software to easily 
automate repetitive tasks and created rules for constructing letterforms 

with code. Many of the characters shown here are constructed by repeating 
numerous small elements using Nodebox and Processing. Shim is also 
interested in using code as a means to expose the design process and has 
shared the code for his computational type projects (ndbx files) so that other 
designers can understand his process and play with the parameters. 


SUI 


CONCENTRIC FORMS Designers have long experimented with creating letterforms 


out of concentric lines and shapes. These letters acquire depth and dimension 
where the lines converge. Design: Kyuha Shim, 20 


3. 


MESH ALPHABETS These 
letterforms are constructed 

from lattices of lines that 
describe planes in two and three 
dimensions. Design: Sangun Jeon. 
Created in a workshop with Kyuha 
Shim at RISD, 2012. 


READ MORE >> Kyuha Shim, 
Code ce Type, 2013, http://code- 
type.com/; Data: Multi-sensory 
Representation, 2013, http:// 
multisensory-data.com/. 
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Kyuha Shim 


gradually diminishing diameter. Design: Kyuha 


letter are constructed with stacks of circles of 
Shim, 2013. 


SEQUENTIAL CIRCLES The strokes of this 


TRI-GRID Hundreds of stacked triangles come together 
to create these dense, volumetric letterforms. Design: 


Kyuha Shim, 2013. 
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(CASE STUDY. 
SLITSCAN TYPE GENERATOR 


This Illustrator script, written by designer J. K. Keller using JavaScript, types a 
letter using every font installed on a computer. It aligns all the letters and then 
creates slices out of each one, positioning them next to one another based on 
each font’s baseline position. The color of each slit is then randomized to create 
colorful gradations. 


Design: J. K. Keller, 2006 (updated 2010), “Slitscan Generator,” 
http://jk-keller.com/slitscan-type-generator/. 


CASE STUDY 


POSTER MACHINE 


Using Processing and Arduino, designer Luiz Ludwig developed the Poster 
Machine to challenge the digital tools that designers conventionally use to 
make posters. Instead of a computer and Adobe software, Ludwig offers users 
a series of knobs and switches and a flat-panel television; anyone can create a 
poster by manipulating the position and scale of a set of given design elements. 
Each poster is both hand- and machine-made. 


Design: Luiz Ludwig, 2013. 
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‘CASE STUDY 
BUILDING AN ALPHABET WITH CSS 


Programmer David Desandro created his Curtis CSS typeface (opposite page) 
to see if it was possible to build type directly in the browser using only CSS. The 
browser renders each shape in the letters with a combination of background 
color, border width, border radius, and absolute and relative positioning. Gabe 
Kelley was inspired by Desandro to create his own alphabet (below). 


Tetb About 


Totb is a typeface that is only viewable in browsers. Crafted in CSS, Totb takes 
inspiration from David DeSandro's Curtis CSS Typeface, Currently in development. 


ASIDE 


TOTB Each character of this playful display alphabet is made up of 
divs that are given an ID and then styled and positioned with CSS. 
Below is the markup for the letter B. Design: Gabe Kelley, 2012, 
http://gabekelley.com/totb/. 


<div id="b" class="letterform”> 
<div id="b_left"></div> 
<div id="b_top_bowl"></div> 
<div id="b_bottom_bowl”></div> 
<div id="b_top_corner”></div> 
<div id="b_middle_corner”></div> 
<div id="top_corner_shadow”></div> 


<div id="middle_corner_shadow”></div> 
</div> 


EFCH 
IJKLMN 


OPQRST 


UVWxX 
YZ. 


CURTIS CSS TYPEFACE Desandro used CSS spans to create 
these letterforms. The R is constructed from four elements 

(inside split_vert, outside split_vert, stroke, and fill). Design: 
David Desandro, 2010, https://github.com/desandro/curtis- 
css-typeface. 


<span class="css_char r”> 
R 
<span class="inside split_vert”> 
</span> 
<span class="outside split_vert”> 
</span> 
<span class="stroke”></span> 
<span class="fill"></span> 
</span> 


ABCD 
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CASE STUDY 


WEB TYPOGRAPHY FOR THE LONELY 


Designer Christopher Clark is inventing surprising uses for SVG, HTML5 
Canvas, and other emerging tools. His site, WebTypographyfortheLonely.com, 
created as an MFA thesis project at MICA, not only showcases these startling 
prototypes, but also provides instructive commentary and free code. The 
shapes can be programmed to perform actions such as float away or disas- 
semble on mouseover. 


ILLUMINATE uses SVG graphics to encase letterforms in scalable 
vector elements in a shifting grid of shapes and colors. 


PLEASE 
PORT Ge 


GALACTIFY uses HTMLS Canvas to generate complex networks of forms. 
It also exploits Canvas’s ability to fill a typeface with shapes. 


[ 


CLUSTER reads a font’s shape pixel by pixel and stores the data 
as coordinates. It then uses the stored data to reconstruct the text 
out of tiny particles. 


TRIANGULATE explores the sophisticated transparencies made 
possible by HTMLS Canvas. As the triangles expand, they crash 


into one another. 
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Design: Christopher Clark, 2011. 
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and stacked to create an illusion of depth. The designer worked 


TYPOGRAPHIC PATTERNS The letterforms / and i are multiplied 
with the Binary Tree algorithm, which is often used in computer 
science to structure data. Here the algorithm controls visual 
complexity, hierarchy, and density. Design: Xiaofeng Lin, 2012. 


COMPRESS AND RELEASE This experimental alphabet was Behind the English letterforms are the Chinese characters whose 
created using the Binary Tree algorithm and Ricard Marxer Pifién’s pronunciation starts with the English letter in front of it; starting 
Geomerative Library for Processing. It explores interrelationships points of the binary trees are based on the forms of the Chinese 
between English letters and Chinese characters. characters. Design: Xiaofeng Lin, 2012. 


FIERY LETTERFORMS This alphabet was made using the 
Geomerative Library and Caligraft by Ricard Marxer Pifién, with 


the open-source font Intro Inline. The designer used Processing 
to modify the letterforms and create new variations. Design: 
Matthew Dongki Kim, 2012. 
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@font-face rule, 12, 13, 76 
@media query, 56 


Acrobat Reader. See Adobe. 
Adams, Lauren, 129, 153 
Adams, Vernon, 37 
Adelle, 21, 22, 23 
Adobe, 17, 23, 31 

Acrobat Reader, 80 

CS6, 131, 187 

Digital Publishing 
Suite, 85, 96, 113 
Illustrator, 76, 135, 149, 
56, 157, 187 
InDesign, 92, 131, 165 
Photoshop, 76, 149, 165, 
74, 186 
Aghabayan, Tatevik, 189 
n, Yeohyun, 187, 193, 204 
ola, Brian, 175 
GA, 127 
QA, 104 
zidenz-Grotesk, 28, 184 
cantara, Rolando G., 40, 
42-43 
Alegreya, 36 
alignment, 62-63, 117, 118 
Ali, Reza, 186 
A List Apart, 88, 106 
Allen, Amanda, 76 
A 
A 


mendra, 37 
phaBeta, 42 
alpha values, 149 
alternate characters, 40-41, 
72-73 
Alternate Gothic No. 1, 18 
Amazon Kindle, 14 
anchor link, 106 
Andika, 37 
animated GIF, 165, 172-75, 
185 
apostrophe, 74, 75 
Apple, 110 
iPad, 14 
Launchpad, 131 
OS, 28 
OSX, 128 
Safari, 13, 131 
Arduino, 142, 199 
Arial, 19, 28 
Aristotle, 178 
Arntz, Gerd, 126 
Artigas, Constanza, 37 


A-Sans, 11, 38-39 

ASAP, 37 

ascender, 16, 72 

Astasio, Juan, 112 
Astrom/Zimmer, 82 
Atelier Carvalho Bernau, 91 
Atrissi, Tarek, 77 


Barber, Ken, 40-41 

Barrel, 100-101 

Barth, John, 178 

baseline, 16, 65 

Benguiat, Ed, 40-41 

Benner, Laurent, 190 

Benton, Morris Fuller, 18 

Berlow, David, 13 

Berry, Bob, 174 

Bézier curves, 188 

Bierut, Michael, 147 

Bil'ak, Peter, 8, 14-15, 26, 
40-41, 43, 90, 133 

Binary Tree algorithm, 187, 
204-5 

Bjornard, Kristian, 76-77 
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“At last, here is one book that helps make 
sense of the shifting world of type on 


screen(s) for students of design and the 


people who teach them.” —Liz DANZICO, CHAIR, 


MFA INTERACTION DESIGN, SCHOOL OF VISUAL ARTS 


“This book is a sound and concise guide 
to screen-based design across a range of 
media. Type on Screen introduces the dark 
arts of digital type to the uninitiated.” 


—VERONIKA BURIAN, TYPE TOGETHER 


Type on Screen is the definitive introduction to using typography in screen- 
based applications, from film and video to websites, electronic publications, and 
mobile apps. This practical primer shows how to combine classic concepts of 
typographic form and structure with screen-based technologies and principles of 
user interaction and animation. Type on Screen offers guidance on how to choose 
typefaces for the screen; how to style beautiful, functional text and navigation; 
how to apply principles of animation to text; and how to create compelling logos and 
icons. Reinforced with dos, don'ts, and basic exercises and tutorials, Type on Screen 
can be used as a textbook for college-level courses in web design, interaction design, 
and motion graphics and is an indispensable guide for any designer or developer 
seeking practical and inspirational information about digital typography. 

Visit www.typeonscreen.info for demonstrations of screen-based material 


and information on digital editions of Type on Screen. 


line-height: 1005 line-height: 150 


We work on Type on Screen is one 

screens, write 

on screens, Of the rare books 

and read on examining graphic 

— design for digital 
media. 


This guide points to 
ways that typography 
may be evolving. 


Peter Bil'ak, Typotheque 
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program at MICA (Maryland Institute College of Art). The book was researched, written, 
and designed by a team of designers at MICA, who explored the role of typography 
across a spectrum of contemporary digital practices. Other volumes produced by 

MICA faculty and students include D./.Y. Design It Yourself, Indie Publishing: How to 
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